jquery - 从不同元素调用 jQuery 插件时如何使用同一个实例？

Question

我用过this plugin boilerplate作为创建一个插件的起点，该插件允许我直接调用它的方法:

;(function ($, undefined ) {
    var pluginName = 'myPlugin',
        defaults = {
            option1: 'none',
            option2: 'none',
        };

    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend({}, defaults, options) ;
        this.someBool = undefined;

        this.init();
    }

     Plugin.prototype = {

        init: function () {
            this.someBool = false;
        },
        someMethod: function (selector) {
            var self = this;
            $(selector).each(function () {
                // do something to the element using self.options
                self.someBool = true;
            };
        }
        someOtherMethod: function (selector, myBool) {
            var self = this;
            $(selector).each(function () {
                // do some other thing to the element using self.options
                self.someBool = myBool;
            };
        }
    }
    $.fn[pluginName] = function (options) {
        var args = arguments;
        if (options === undefined || typeof options === 'object') {
            return this.each(function () {
                if (!$.data(this, 'plugin_' + pluginName)) {
                    $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
                }
            });
        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
            var returns;
            this.each(function () {
                var instance = $.data(this, 'plugin_' + pluginName);
                if (instance instanceof Plugin && typeof instance[options] === 'function') {
                    returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
                }

                if (options === 'destroy') {
                  $.data(this, 'plugin_' + pluginName, null);
                }
            });
            return returns !== undefined ? returns : this;
        }
    };

}(jQuery));

因此，如果我调用不带参数或使用对象作为参数的插件，它会实例化并初始化它。如果我传递一个字符串，它会查找具有该名称的方法并将其他参数传递给它。现在我像这样使用它(请注意，#someElement 仅用于存储实例，没有其他用途):

$('#someElement').myPlugin({
    option1: 'value1',
    option2: 'value2',
});
$('#someElement').myPlugin('someMethod', '#someOtherElement');
$('#someElement').myPlugin('someOtherMethod', '#yetAnotherElement', false);

它有点工作，但我希望能够使用不同的选择器来调用这些方法，同时使用同一个实例，一个单例，如果你愿意的话。像这样的东西:

$.myPlugin({
    option1: 'value1',
    option2: 'value2',
});
$('#someOtherElement').myPlugin('someMethod');
$('#yetAnotherElement').myPlugin('someOtherMethod', false);

我不是一个 JavaScript 程序员，但据我所知，我必须将它的实例存储在我用来调用它的元素之外的地方，也许在窗口中 对象还是 jQuery 命名空间？能够在使用和不使用选择器的情况下调用它怎么样？可行吗？

Answer 1

有一些 jQuery 插件充当单例。 jQuery cookie是一个简短且易于阅读的示例。根据您的要求调整其模式应该没有问题。

本质上，单例插件只是直接在 $ 上定义自己，如

$.myplugin = function(...)

并跳过整个

return this.each(function () { }

部分，因为它们没有在 jQuery 元素上初始化。所以这主要是把一些东西省略掉的问题;)