javascript - $.fn.myFunction() 的正确用法

Question

(function($) {
    $.fn.myFunction = function(config) {

        var defaults = {
            setting1: 'myDiv',
            setting2: ''
        };
        var config = $.extend(defaults, config); 

        //code here


    };

})(jQuery)


$(document).ready(function() {

    $.fn.myFunction({
        setting1: 'myDiv',
        setting2: ''
    });

});

这就是我一直使用 jQuery 插件的方式，但我最近了解到它应该像这样使用:

$('#myDiv').myFunction({
    setting1: 'myDiv',
    setting2: ''
}); 

1) 我认为这允许将 $(this) 用于 $('#myDiv')?

2) 是否需要$(document).ready(function()？

3) 我一直使用这个 jQuery 函数的方式是否有任何不利之处？

4) 如果 $('#myDiv').myFunction() 是正确的用法，如果它只是一个在文档就绪时运行的函数，您将如何调用该函数 - 在这里查看我的用法:https://stackoverflow.com/a/12316349/1455709 .这仅仅是函数的错误使用吗？

Answer 1

调用 $.fn.myFunction() 和调用 $('#myDiv').myFunction() 是两件不同的事情。没有对错之分——这取决于你在做什么。

调用 $.fn.myFunction()

这本质上是一个静态函数，您可以根据需要像那样使用它。在 jQuery 世界中，.fn 就像 .prototype 所以 $.fn.myFunction() 就像调用 jQuery.prototype。我的函数()。它是允许的，但它是一个与特定 jQuery 对象无关的静态函数调用。如果你只是想要一个静态函数调用，那么你可以这样做，但这通常不是 jQuery 原型(prototype)的使用方式，我一般不会推荐它。如果你只想要一个静态函数并想使用 jQuery 命名空间，你可以这样做:

$.myFunction = function(args) {/* your code here */};

然后像这样调用它:

$.myFunction();

因为根本不需要使用原型(prototype)。

调用$('#myDiv').myFunction()

原型(prototype)(例如 jQuery 世界中的 .fn 用于向实际的 jQuery 对象添加方法。

当您执行此操作时，$('#myDiv').myFunction() 是实时 jQuery 对象的成员函数。您可以在 myFunction() 实现中引用 this ，它将是一个 jQuery 对象，在本例中包含与 id="对应的 DOM 对象我的分区”。如果您从方法中返回 jQuery 对象，您还可以使用链接。

使用哪个？

如果您的代码在 jQuery 对象上运行，那么它应该是一个实时 jQuery 对象上的方法，它应该访问 this 以获取 jQuery 对象实例数据，您应该将其声明为 $.fn.myFunction = function() {};并将其命名为$('#myDiv').myFunction()`。

如果您的代码不对 jQuery 对象进行操作，而只是您调用的实用函数，并且它并不总是对 jQuery 对象进行操作，那么，您应该将其声明为 $.myFunction = function() {}; 并且您应该将其称为 $.myFunction()。