jQuery插件多重实例化

jQuery plugin multiple instantiation

本文关键字：实例化 插件 jQuery      更新时间：2023-09-26

我正在使用此处的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});

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

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

您可以按照本指南了解有关防止多个实例化的更多信息：j查询插件模式

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

删除它并替换为

new Plugin( this, options );

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

的

您需要在每个实例的基础上扩展默认值/选项。请记住，在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 ));
    }
  });
}
相关文章：