Question

如果我定义这样的原型

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

并将其称为：

$('div').myFunc();

this内的

myFunc将引用jQuery对象选择。

现在，如果我不想污染.fn多个附加功能，我可以做一些像

这样的事情

jQuery.fn.myPlugin =  {

    myFunc1: function() {

    },

    myFunc2: function() {

    }       

}

如果我将其称为$('div').myPlugin.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 plugin tutorial暗示了这一点：

(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"
})

对象为jQuery.fn原型？

4 个答案: