jQuery插件多个实例化 [英] jQuery plugin multiple instantiation

问题描述

我正在使用此处的jquery插件样板。

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

推荐答案

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

将其删除并替换为

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

这篇关于jQuery插件多个实例化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！