6

これがスタックオーバーフローの質問であるかどうかはわかりません。一般的なものなので、許してください。

次のマークアップがあるとしましょう。

<div class="plugin"> ... </div>
<div class="plugin"> ... </div>
<div class="plugin"> ... </div>

そして、jqueryプラグインを実行して、pluginクラスを持つすべての要素に渡すことはしません。

$(".plugin").myPlugin();

プラグインコードは次のようになります。

;(function ( $, window, undefined ) {

  var myPlugin = 'myPlugin',
      document = window.document,
      defaults = {
        propertyName: "value"
      };

  // The actual plugin constructor
  function Plugin( element, options ) {
    this.element = element;

    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = myPlugin;

    this.init();
  }

  Plugin.prototype.init = function () {

  };

  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations
  $.fn[myPlugin] = function ( options ) {
    return this.each(function () {
      if (!$.data(this, 'plugin_' + myPlugin)) {
        $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
      }
    });
  }
}(jQuery, window));

このコードを実行すると、クラス名が。の要素ごとにプラグインコンストラクターが呼び出されているように見えますmyPlugin。divのコレクション全体でプラグインを実行し、コンストラクターを1回だけ呼び出すと思いました。

それで、それはどのように機能しますか？クラスセレクターによって返される要素ごとにプラグインのインスタンスが作成されていますか？

4

3 に答える 3

2

上から

$(".plugin").myPlugin();

jqueryセレクター

jQueryはセレクターを取得し.plugin、通常の選択プロセスを実行して、結果の長さ、結果の配列、および使用されるセレクターも含むjQueryオブジェクト（チェーンに使用可能なjQueryプロトタイプを含む）を生成します。

したがって、$(".plugin")前述の内容でこのオブジェクトを返します。

myPlugin（）

myPlugin()関数呼び出しです。から返されたjQueryプロトタイプに対して作成され$(".plugin")ます。この関数は、定義された場所にあります$.fn[myPlugin]。fn基本プロトタイプに機能を追加するjQueryの方法です。これは一度だけ呼び出されることに注意してください。

$ .fn[myPlugin]=関数

ここで呼び出された関数が実行されます。これはthis、上記の元のjQueryオブジェクト（セレクターからの結果の配列を含む）で実行されます。this.each(function () {...}、jQueryのeach関数はjQueryオブジェクトからの結果を反復処理します。あなたの例の場合、3つのdivがあります。

各反復が実行されます

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

最初の行は、「plugin_myPlugin」（myPluginは定数文字列値）という名前のデータオブジェクトが現在の要素（これらの3つのdivの1つ）に存在するかどうかを確認する条件ステートメントです。このコードが最初に実行されたとき、それらのどれもこれを持っていません。

$ .data（this、'plugin_' + myPlugin、new Plugin（this、options））;

このコード行thisは、現在のhtml要素であるオブジェクトを取得し、それをjQueryのdataメソッドに渡します。このメソッドは、名前でインデックス付けされた要素にオブジェクトを追加します。この場合の名前は「plugin_myPlugin」で、オブジェクトは...

新しいプラグイン（this、options）

$.fn[myPlugin]プラグインは、例のスコープに対してローカルに定義された関数です。として定義されfunction Plugin( element, options ) {...}ます。

関数プラグイン（要素、オプション）{...}

この関数は、の反復から渡された要素（eachこの例では3つのdivの1つ）と、元々引数として送信されたオプション$.fn[myPlugin]（この場合、渡されたものはありませんでした）を受け取ります。とmyPlugin()。

関数はこれらの引数を受け取り、、、、、およびを使用して現在のFunctionオブジェクトにそれらを構築し、this.elementinitthis.options関数（ここでは空です）を呼び出します。this._defaultsthis._name

その後、Functionオブジェクトが作成され、jQueryのdataメソッドを使用して現在の要素にアタッチされます。

エグゼクティブサマリー

拡張関数myPluginは、使用されるセレクターから生成されたjQueryオブジェクトの要素ごとに1回実行されます。拡張関数は、Plugin適格な要素ごとに定義された関数から新しいFunctionオブジェクトを作成します（したがって、この正確な例では、各要素でコンストラクターを3回実行します）。

于 2013-01-07T01:14:54.713 に答える
2

次のコメントが役立つかもしれません。

$.fn[myPlugin] = function ( options ) {
    /* "this" is collection of elements from selector*/
    return this.each(function () {
        /* "this" is individual element due to being inside "each" loop*/
      if (!$.data(this, 'plugin_' + myPlugin)) {
        $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
      }
    });
  }
于 2013-01-07T00:37:44.107 に答える
1

クラス セレクターによって返された各要素に対して作成されたプラグインのインスタンスはありますか?

はい。this.eachプラグインコンストラクター内で呼び出し、各要素の新しいコンストラクターを初期化するときに要素をループしているためですPlugin。

コレクションに対して単一のカスタム コンストラクターを実行する場合は、 を実行せずに、コンストラクターthis.eachに渡すだけです (ただし、 を使用してプラグインの「キャッシュ」を再考する必要があるかもしれません) 。thisPluginjQuery.data

于 2013-01-07T00:33:06.890 に答える