javascript - jQuery 插件多重实例化

Question

我正在使用发现的 jquery 插件样板 here .

但是它提到构造函数会阻止多次实例化，我想知道我需要做什么才能修改它以允许多次实例化？

插件样板如下:

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, undefined ) {

// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.

// window and document are passed through as local variables rather than globals
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).

// Create the defaults once
var pluginName = 'defaultPluginName',
  document = window.document,
  defaults = {
    propertyName: "value"
  };

// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;

// jQuery has an extend method which merges the contents of two or 
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.options = $.extend( {}, defaults, options) ;

this._defaults = defaults;
this._name = pluginName;

this.init();
}

Plugin.prototype.init = function () {
// Place initialization logic here
// You already have access to the DOM element and the options via the instance, 
// e.g., this.element and this.options
};

// A really lightweight plugin wrapper around the constructor, 
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
  if (!$.data(this, 'plugin_' + pluginName)) {
    $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
  }
});
}

}(jQuery, window));

特别是构造函数部分是:

// A really lightweight plugin wrapper around the constructor, 
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
  return this.each(function () {
    if (!$.data(this, 'plugin_' + pluginName)) {
      $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
    }
  });
}

最终，如果该插件用于在元素上设置一些事件，我希望能够调用:

$('#example1').myplugin({options});
$('#example2').myplugin({options});

Answer 1

对于多个实例，您需要为每个实例创建一个新的闭包，请尝试以下代码:

// A really lightweight plugin wrapper around the constructor, 
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, 
            new Plugin( this, options ));
        }
    });
}

您可以按照本指南获取有关防止多重实例化的更多信息: jQuery Plugin Patterns