如何编辑未压缩的jQuery库以在函数中满足自己的需求？

Question

我有一个任务，在这个任务中我必须在一个函数中包含一个特定的需求。与我们使用的常规jQuery相比，CDN代码看起来有点难以理解。

问题是，当我关注像input框这样的东西时，它不应该只关注它，还应该返回它的top和left位置。这个功能应该包含在CDN文件中。然后使用一个常规程序，我必须叫它。

$(document).ready(function(){
    $("input").focus(function(){
        $("input").css("background", "lightblue");
        var p = $( "input" );
        var position = p.offset();
        $("div").text( "left: " + position.left + ", top: " + position.top );       
    });
});

Answer 1

第一，永远不要修改图书馆的来源。如果您这样做，它会将您与特定版本的代码联系在一起。如果作者更新了库，他们就会中断您所做的添加。如果要创建其他功能，请创建自己的扩展方法或原型。

也就是说，要做您需要做的事情，只需修改代码，只引用引发事件的元素。为此，请在处理程序函数中使用this关键字。试试这个：

​

$("input").focus(function() {
  var $input = $(this).css("background", "lightblue");
  var position = $input.offset();
  console.log("left: " + position.left + ", top: " + position.top);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />

​

Answer 2

根据我的经验，你想做的事情是不被推荐的。除非库没有维护，否则您可以从它的github获得一个分支，然后添加您的更改，以便您能够维护它。

在这种情况下，jQuery是一个高度维护的项目，编辑它的源代码以添加您自己的代码将是灾难性的。相反，使用提供的插件体系结构向现有代码添加更多功能。

请阅读正式文档以获得此特性的概述。

如何创建一个基本的jQuery插件。