作为jQuery.fn原型的对象？

Question

如果我这样定义原型

jQuery.fn.myFunc = function() {
    console.log(this);
}

并这样称呼它：

$('div').myFunc();

myFunc内部的this将引用jQuery对象选择。

现在，如果我不想使用多个附加函数来污染.fn ，我可以做些什么吗？

jQuery.fn.myPlugin =  {

    myFunc1: function() {

    },

    myFunc2: function() {

    }       

}

如果我称之为$('div').myPlugin.myFunc1(); -如何获得对myFunc1内选定对象的myFunc1 ？ 还是有其他更好的方法？

Answer 1

不。 不能那样做。 而是将其定义为一个函数，然后向该函数添加属性。

jQuery.fn.myPlugin = function() {
    console.log(this);
};

jQuery.fn.myPlugin.myFunc1 = function() {

};

jQuery.fn.myPlugin.myFunc2 = function() {

};

请注意，myFunc1和myFunc2仍然无法访问所选元素，因此，以这种方式定义它们相对没有用，除了它们可以被其他开发人员轻松覆盖的事实之外（这是一件好事）

在插件中包含其他方法的通常方法是让您的插件方法接受一个参数，该参数可以是初始化插件的对象，也可以是在元素上执行目标方法的字符串。 例如， $("somediv").myPlugin("myFunc1")

Answer 2

如果您之前创建了对象，则可以正常工作。

像这样：

 <script>
    jQuery.fn.myPlugin = {};

    jQuery.fn.myPlugin =  {

        myFunc1: function() {
            console.log(this);
        },

        myFunc2: function() {
            alert(this);
        }       

    };
    $(document).ready(function(){
        $('div').myPlugin.myFunc1();
        $('div').myPlugin.myFunc2();
    });

</script>

Answer 3

jQuery插件教程建议这样做：

(function( $ ) {

    $.fn.popup = function( action ) {

        if ( action === "open") {
            // Open popup code.
        }

        if ( action === "close" ) {
            // Close popup code.
        }

    };

}( jQuery ));

我想这将是另一种选择：

(function($) {
    $.fn.myPlugin = function (action) {
        var functions = {
            open: function () {
                console.log('open: ', this);
            },
            close: function () {
                console.log('close:', this);
            }
        }

        if (action && functions[action]) {
            functions[action].call(this)
        } else {
            console.log('no function', this);
        }

        return this;
    };
}(jQuery));

$('#theDiv')
    .myPlugin()
    .myPlugin('open')
    .myPlugin('close');

http://jsfiddle.net/faJAk/

Answer 4

另一种可能的方法是使用defineProperty ：

(function($) {

    var myPlugin = {
        foo: function() {
            console.log(this)
        }
    }

    Object.defineProperty($.fn, "myPlugin", {
        get : function() { return $.extend({}, this, myPlugin) }
    });

})(jQuery);

现在$(...).myPlugin.foo应该可以正确解决this ：

$(function() {
    $("body").myPlugin.foo(); // logs "body"
})