2

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

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

插件样板如下：

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

3 回答 3

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

于 2015-04-27T15:13:40.310 回答
1 
if (!$.data(this, 'plugin_' + pluginName)) {
  $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}

删除它并替换为

new Plugin( this, options );

它将不再检查它之前是否已在元素上实例化，而只是初始化插件。但是请记住，如果插件覆盖了先前的实例化，或者无论如何修改了先前的实例化，这可能会导致冲突或错误问题。因此，请确保您的插件是用这种思想编码的

于 2012-05-16T10:57:08.223 回答
0

您需要在每个实例的基础上扩展默认值/选项。请记住，在 javascript 中，对象只是一个引用，因此如果您要更改构造函数中的选项，则您正在更改所有其他元素正在引用的对象。

// 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 ));
    }
  });
}
于 2013-04-28T18:49:38.807 回答