1

そこで、最終的に jQuery について何かを学ぶことにしました。自分のプロジェクトの 1 つに単純な関数が必要だったので、適切なパターンを探し始めました。

私は公式ガイドから始めましたが、すぐに他の多くの可能なテンプレートを見つけました. そのうちの 2 つを参照して質問します。

最初の1つ

二つ目

最初のパターンは、私にはずっとすっきりしているように思えます。名前空間のアイデアがとても気に入っています。しかし、これはどのように使用されますか？関数全体を名前空間のメソッドとして記述し、それらすべてを呼び出して、最後にIIFEinit()でこの 1 つのメソッドを呼び出すだけinit()ですか、それとも必要なメソッドをIIFEで直接呼び出す必要がありますか?

この質問は非常にばかげているように感じますが、使い方がわかりません。

2 番目のパターンは、私にとってさらに複雑です。これを見てください：

;(function ( $, window, document, undefined ) {
    //...
})( jQuery, window, document );

これらすべてのパラメータとは何ですか?どこで設定すればよいですか?なぜ必要なのですか? 最初のサンプルのラッパーの欠点は何ですか?

可能性の多様性には圧倒されます。どこから始めればよいのか、自分にとって正しいことをどのように見つければよいのかわかりません。

4

3 に答える 3

1

Smashing Magazineのこの優れた記事をチェックしてください。
多数の jQuery プラグイン パターンをカバーし、それぞれについて説明しています。

編集：
あなたの質問に答える記事の一部があります:)

于 2013-04-18T07:02:34.463 に答える
0

プラグイン/オーサリングのドキュメントから- jQuery Wiki

jQuery プラグインを作成するには、新しい関数プロパティを jQuery.fn オブジェクトに追加することから始めます。ここで、プロパティの名前はプラグインの名前です。

jQuery.fn.myPlugin = function() {
  // Do your awesome plugin stuff here
};

上記は最も簡単なプラグイン作成です。$従うべき特定の手順がありますが、mootools、prototype などの他のライブラリとのドル記号の競合を避けるために、クロージャを使用することがベスト プラクティスです。

プラグインがドル記号を使用する可能性のある他のライブラリと衝突しないようにするため、jQuery をドル記号にマップする IIFE (Immediately Invoked Function Expression) に渡して上書きできないようにすることをお勧めします。実行範囲内の別のライブラリによって。

 (function( $ ) {
   $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
   };
})(jQuery);

そのクロージャ内で、jQuery の代わりにドル記号を好きなだけ使用できます。

名前空間:

プラグインの名前空間を適切に設定することは、プラグイン開発の非常に重要な部分です。名前空間が正しく設定されていると、プラグインが他のプラグインや同じページに存在するコードによって上書きされる可能性が非常に低くなります。名前空間は、メソッド、イベント、およびデータをより適切に追跡できるため、プラグイン開発者としての作業も楽になります。

プラグイン メソッド

(function( $ ){
  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
    // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };
})(jQuery);

$.fn名前空間が乱雑になるため、これは推奨されません。これを解決するには、プラグインのすべてのメソッドを に集め、メソッドobject literalの文字列名をプラグインに渡して呼び出す必要があります。

 (function( $ ){
     var methods = {
        init : function( options ) { 
              // THIS 
        },
        show : function( ) {
              // IS
        },
        hide : function( ) { 
              // GOOD
        },
        update : function( content ) { 
              // !!! 
        }
     };

  $.fn.tooltip = function( method ) {
   // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
   };
 })( jQuery );

// calls the init method
 $('div').tooltip(); 

 // calls the init method
 $('div').tooltip({
    foo : 'bar'
 });
于 2013-04-18T07:11:55.590 に答える