jQuery plugin multiple instantiation

问题

I'm using the jquery plugin boilerplate as found here.

However it mentions that the constructor prevents against multiple instantiation, and I wanted to know what would I need to do in order to modify this to allow multiple instantiations?

The plugin boilerplate is as follows:

// 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));

In particular the constructor section is:

// 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 ));
    }
  });
}

Ultimately, if the plugin was used to setup some events on an element, I would like to be able to call:

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

回答1:

if (!$.data(this, 'plugin_' + pluginName)) {
  $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}

remove that and replace with just

new Plugin( this, options );

it will no longer check if its been instantiated previously on the element and just init the plugin regardless. However bare in mind that this may cause conflicts or errorneous issues if the plugin overwrites a previous instantiation, or modifies the previous one in anyway. So make sure your plugin is coded with this mind

回答2:

For multiple instances you need to have a new closure for each instance, try the code below:

// 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 ));
        }
    });
}

you can follow this guide for more information about preventing against multiple instantiations: jQuery Plugin Patterns

回答3:

You need to extend the defaults/options on a per instance basis. Remember in javascript objects are just a reference so if you are changing the options inside your constructor you are changing the object that all of your other elements are referencing.

// 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)) {
     //extend your options in here
      var newOptions = $(true, {}, $.fn[name].opts, options);
      $.data(this, 'plugin_' + pluginName, new Plugin( this, newOptions ));
    }
  });
}

来源：https://stackoverflow.com/questions/10617019/jquery-plugin-multiple-instantiation