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

複数のインスタンスの場合、インスタンスごとに新しいクロージャーが必要です。以下のコードを試してください。

// 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プラグインパターン

于 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 に答える