より良い jQuery plugins_jquery を作成するのに役立つ 10 のヒント

この記事では、より優れた jQuery プラグインの作成に役立つ 10 の提案をまとめています。皆さんの参考に共有してください。具体的な手順は次のとおりです:

多くの jQuery プラグインを開発した後、私は jQuery プラグインを開発するための比較的標準的な構造とパターンのセットをゆっくりと理解しました。こうすることで、コード構造の大部分をコピーして貼り付けることができ、メインのロジック コードだけに集中できます。同じ設計パターンとアーキテクチャを使用すると、バグの修正や二次開発の実行も容易になります。実績のあるアーキテクチャにより、プラグインが単純であるか複雑であるかに関係なく、プラグインが大きな問題を引き起こさないことが保証されます。ここでは私がまとめた10の経験を紹介します。

1. すべてのコードをクロージャ

の中に入れます。

これは私が最もよく使っているものです。ただし、クロージャの外側にあるメソッドを呼び出すことができない場合があります。

しかし、プラグインのコードは独自のプラグインにのみ機能するため、この問題は存在しません。すべてのコードをクロージャに含めることができます。

メソッドはおそらく Prototype メソッド内に配置する必要があります。

(function($) {  
  //code here 
})(jQuery);

2. プラグインのデフォルト オプションを提供します

プラグインには開発者が設定できるいくつかのオプションが必要であるため、デフォルトに戻すオプションを提供する必要があります。 これらのオプションは、jQuery の extend 関数を使用して設定できます:

var defaultSettings = {   mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});

3.

を使用して要素を返します。

JavaScript/jQuery にはメソッドのカスケードを実行できるという優れた機能があるため、この機能を破壊せず、常にメソッド内の要素を返す必要があります。私は作成するすべての jQuery プラグインでこのルールに従います。

$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

4. ワンタイムコードをメインループの外に配置します

これは非常に重要ですが、無視されることがよくあります。簡単に言えば、デフォルト値の束であり、プラグイン関数が呼び出されるたびにインスタンス化するのではなく、一度だけインスタンス化する必要があるコードがある場合、このコードをプラグインの外に置く必要があります。方法。これにより、プラグインがより効率的に実行され、メモリが節約されます。

var defaultSettings = {  
               mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});
$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

上記のコードの「defaultSettings」は完全にプラグイン メソッドの外側にあることがわかります。これらのコードはクロージャの内側にあるため、これらの変数がオーバーライドされることを心配する必要はありません。

5. クラス プロトタイピングを設定する理由

コードの血肉として、メソッドと関数はプロトタイプ関数内に配置する必要があります。理由は 2 つあります:

◆ これらのメソッドを繰り返し作成する必要がないため、メモリを大幅に節約できます。

◆ 既製のメソッドを参照する方が、再作成するよりもはるかに高速です。

簡単に言えば、プロトタイプはオブジェクトを拡張し、すべてのオブジェクトでメソッドをインスタンス化することなく、そのメソッドを提供します。これにより、コードがより整理され、効率的になります。この開発方法に慣れれば、今後のプロジェクトで時間を大幅に節約できることがわかります。

6. クラスプロトタイピングの設定方法

プロトタイプ メソッドの設定には 2 つの部分があります。まず最初のクラス定義を作成する必要があります。これはほとんどの場合、オブジェクトを作成することを意味します。この定義には、オブジェクト インスタンスごとに異なる部分が含まれます。ペイント jQuery プラグインで、次のように書きました:

function Canvas(settings) {  
 this.settings = settings;   
 this.draw = false;   
 this.canvas = null;    
   this.ctx = null;  
  return this;
}

グローバル メソッドを追加しましょう:

Canvas.prototype = {   
 generate: function() { 
    //generate code  
 } 
}

ここで重要なのは、プロトタイプのメソッドを汎用にすることですが、データは各インスタンスに固有であり、「this」で参照できるようになります。

7. 「this」オブジェクトを使用します

「$this」を使用すると、他のクロージャに正しい参照を渡すことができます。 $this 参照を他のメソッドに渡す必要がある場合もあります。 $this という名前は変更でき、任意の変数名を使用できることに注意してください。

Canvas.prototype = {  
 generate: function()  { 
    //some code    
  var $this = this;    
  var buton = //...some code  
    button.click(function(){ 
    //using this will not be found since it has it's own this    
    //use $this instead.     
   $this.someFunc($this);    
  });  
 }, 
 someFunc: function($this)   {  
    //won't know what "this" is.  
   //use $this instead passed from the click event  
  } 
}

8. 各オブジェクトに設定を保存します

私は各オブジェクトに独自の設定を保存し、独自の設定を操作してきました。こうすることで、さまざまなメソッドで多くのパラメーターを渡す必要がなくなります。これらの変数をオブジェクトに配置すると、他の場所でこれらの変数を呼び出すのも簡単になります。

function Canvas(settings) {  
 this.settings = settings;  
  return this; 
}

9. プロトタイプ メソッド ロジックを分離します

これは基本原則かもしれません。メソッドを提供することに躊躇する場合は、「他の人がこのメソッドをオーバーライドした場合、あなたのコードはそのニーズを満たすだろうか?」または「他の人がこのメソッドを書くのはどれほど難しいだろうか?」と自問してみてください。もちろん、これは柔軟性の問題です。これは私の Color Picker jQuery プラグイン メソッドのリストです。参照してください:

generate() 
appendColors() 
colorSelect() 
colorHoverOn() 
colorHoverOff() 
appendToElement() 
showPalette() 
hidePalette()

10. Setter/Getter オプションを指定します

これは必要ありませんが、すべてのプラグインにこれ​​が含まれていることがわかりました。他の人が必要とする可能性のある機能を提供するには、ほんの少しのコードしか必要ないからです。

基本的に必要なのは、開発者が要素の既存の値を設定または取得できるようにすることだけです。

var lineWidth = $("#container").wPaint("lineWidth"); 
$("#container").wPaint("lineWidth", "5");

要約: 上記の 10 項目は基本的に jQuery プラグイン開発の中核をカバーしており、開発のテンプレートとして使用できます。基本的なコード セットがあれば、開発時間が大幅に短縮され、プラグイン アーキテクチャを設計する際に自信が持てるようになります。

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。