正确使用$ .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

1. 是的，如果您return this来自函数内部，请进行正确的链接。

2. 是的，如果您的代码在加载dom之前运行。

3. 这不是真正的jQuery，它不会像人们期望的那样发挥作用。有人可能会将其称为$('#myDiv').myFunction()，但它无法按预期执行。

4. 如果您想要一个可以随时运行的函数，请不要将它添加到jQuery原型（$.fn）。相反，您可以将其添加到$，就像其他不需要选择器的jQuery函数一样，例如$.trim。然后你可以这样称呼它：$.myFunction(options);

Answer 2

致电$.fn.myFunction()并致电$('#myDiv').myFunction()是两回事。没有对错 - 这取决于你在做什么。

调用$ .fn.myFunction（）

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

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

然后将其称为：

$.myFunction();

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

致电$('#myDiv').myFunction()

当您想要将方法添加到实际的jQuery对象时，使用jQuery世界中的原型（例如.fn。

执行此操作时，$('#myDiv').myFunction()是实时jQuery对象的成员函数。您可以在this实现中引用myFunction()，它将是一个jQuery对象，在这种情况下保存与id="myDiv"对应的DOM对象。如果从方法返回jQuery对象，也可以使用链接。

使用哪种？

如果您的代码在jQuery对象上运行，那么它应该是实时jQuery对象上的一个方法，它应该访问this以获取jQuery对象实例数据，您应该将其声明为{{1} } $（ '＃myDiv'）。myFunction的（）`。

如果你的代码不能在jQuery对象上运行，并且只是你调用的实用程序函数，并且它并不总是在jQuery对象上运行，那么你应该将它声明为$.fn.myFunction = function() {}; and call it as，你应该调用它为$.myFunction = function() {};。