1.閉鎖中にあなたのコード内のすべての
これは私が最も使用するものです。しかし、時には、メソッドクロージャが出て呼び出すことはありません。しかし、あなただけの独自のプラグインサービスのためのコードでプラグインなので、問題はないが、あなたはクロージャの内側に配置されているすべてのコードを置くことができます。この方法は、我々はこれを戻ってくるだろう、プロトタイプの方法の内側に配置することができます。
（関数（$）{ // ここにコード }）（jQueryの）。
2.デフォルトのオプションのプラグインを提供します
あなたのプラグインは、開発者が設定できるようにするいくつかのオプションでなければなりませんので、デフォルトのオプションを復元するためにオファーが必要です。あなたはできるjQueryの機能を拡張し、これらのオプションを設定するには：
VaRの defaultSettings = { モード： '鉛筆'、 lineWidthMin： ' 0 '、 lineWidthMax：' 10 '、 線幅： ' 2 ' }。 設定 = $ .extend（{}、defaultSettings、設定|| {}）。
3.リターン要素を使用します
JavaScriptを / jQueryのは、優れた機能を持っている方法をカスケード接続することができるということであるので、我々は、この機能を破壊してはならない、常にプロセスの要素を返します。私は私のすべてのjQueryプラグインで、このいずれかを保持しました。
$ .fn.wPaint = 機能（設定）{ 返す この .eachを（関数（）{ VARのelem = $（この）; // ここではいくつかのコードを実行します } }
4.外部メインループにおける単回使用コード
これは非常に重要ですが、しばしば見落とさ。簡単に言えば、あなたはコードの部分を持っている場合、デフォルトの束で、一度インスタンス化することだけが必要、あなたはプラグイン機能をないたびに、それらがインスタンス化されるとき、あなたはプラグインのメソッドの外側にこのコードを置く必要があります呼び出します。これは、プラグインの実行より効率的に、メモリを節約することができます。私たちは、実際にこの方法を使用することを見て、背中にプロトタイプを議論します。
VaRの defaultSettings = { モード： '鉛筆'、 lineWidthMin： ' 0 '、 lineWidthMax：' 10 '、 線幅： ' 2 ' }。 $ .fn.wPaint = 関数（設定）{ 設定 = $ .extend（{}、defaultSettings、設定|| {}）。 戻る この .eachを（関数（）{ VARの elemは= $（この）; // ここではいくつかのコードを実行します } }
あなたは上記のコード「defaultSettingsは」コードはクロージャ内にあるので、我々はこれらの変数が書き換えられ心配する必要はありません、完全にプラグインのメソッドの外であることに注意してくださいすることができます。
5.なぜクラスのプロトタイプを設定する必要があります
肉と血のようにコード、メソッドや関数プロトタイプ関数内に配置する必要があります。2つの理由があります。
あなたはこれらのメソッドを複製作成することはできませんので、◆これは、大量のメモリを節約することができます。
◆準備参照方法は、優れた再作成したよりもはるかに高速です。
簡単に言えば、プロトタイプオブジェクトを拡張することです、それはこれらのメソッドをインスタンス化ではなく、すべてのオブジェクトよりも、方法を提供します。また、これはあなたのコードがより組織的かつ効率的なことができます。あなたがこの方法を開発するために慣れたら、あなたはあなたのために多くの時間を節約するために、あなたの将来のプロジェクトでそれを見つけるでしょう。
6.クラスのプロトタイプを設定する方法
プロトタイプのメソッドを設定すると、2つの部分があります。まず、ほとんどの場合、オブジェクトを作成することを意味する私たちの最初のクラス定義を作成する必要があります。この定義は、各オブジェクト・インスタンスの異なる部分を包含する。私のペイントjQueryプラグインプラグインでは、それは私が書いたものです。
関数キャンバス（設定）{ この .settingsの=の設定。 この .draw = 偽; これは = .canvas ヌルを。 この .ctx = nullを。 返す これを。 }
のは、グローバルなアプローチを追加してみましょう：
Canvas.prototype = { 生成：関数（）{ // コードを生成します } }
ここで重要なのは、プロトタイプの方法が一般的であるようにすることですが、データの各インスタンスは、あなたが「this」参照を使用することができ、自分のです。
7.「この」ターゲットを使用してください
「これを$」を使用して、我々は他のクロージャへの正しい参照を渡すことができます。我々はまた、他の方法での$にこの参照を渡す必要があります。なお、この名前が変更された$、すべての変数名とすることができます。
Canvas.prototype = { 生成：機能（）{ // 何らかのコード するvar $ これは = これを、 VaRのブトン= // ...いくつかのコード button.click（関数（）{ //は、それはそれ、これは所有していているので、これは検出されません使用して // 代わりに$これを使用します。 $ この .someFunc（$ この）; }）; }、 someFunc：機能（$ これは）{ // 「これは」何であるかを知ることができません。 //代わりに、クリックイベントから渡された$これを使用 } }
8.保存し、各オブジェクトに設けられました
私はいつも、各オブジェクトに設定を保存して、自身の動作を設定します。だから、さまざまな方法で多くのパラメータを渡すことはありません。オブジェクト上のこれらの変数は、また、あなたが他の場所でこれらの変数を呼び出すことができます。
関数キャンバス（設定）{ この .settingsの=の設定。 返す これを。 }
9.あなたのロジックのプロトタイプを分離する方法
これは、基本的な原理かもしれません。あなたは方法を提供する必要があるかどうか躊躇したとき、あなたはどのようにハード、このメソッドを書くために、」他の誰かを「？他の人がこのメソッドをオーバーライドしたい場合は、あなたのコードは、自分のニーズを満たすことができる」、自問してみてくださいまたはことができますか？ 。 " もちろん、これは問題のちょうど右の柔軟性です。ここでは、参照することができ、私のカラーピッカーjQueryのプラグインの方法です：
- 生成します（）
- appendColors（）
- カラーセレクト（）
- colorHoverOn（）
- colorHoverOff（）
- appendToElement（）
- showPalette（）
- hidePalette（）
10.セッター/ゲッターオプションを提供
この1は必要ありませんが、私はすべてのプラグインが袋この1使用されました。それだけで、彼は他人のために必要とされる機能を提供することができるようになりますコードの少しを必要とするため。
基本的には、限り、我々は、開発者が設定したり、既存の要素の値を取得できるようにすると：
VaRの線幅= $（「＃コンテナ」）wPaint（「線幅」）。 $（「＃コンテナ」）wPaint（「線幅」、」。 5」）。
まず、我々は、我々はそれを参照することができ、オブジェクトと要素を関連付ける必要があります。我々は要素を返す前に、次の操作を行います。
戻る この .eachを（関数（）{ VARの elemは= $（この）; VARのキャンバス= 新しいキャンバス（設定）; //はここにいくつかのコードを実行 elem.data（「_ wPaint_canvas」、キャンバス）; }
次のコードは、まさに私たちが何をする必要があるかオフにします。
$ .fn.wPaint = 関数（オプション設定）{ 場合（typeof演算オプション=== 'オブジェクト'）{ 設定 = オプション。 } そう であれば（typeof演算オプション=== '列'）{ 場合（この .DATA（ '_ wPaint_canvas'）&& D efaultSettings [オプション]！== 未定義）{ VARのキャンバス= この.DATA（ '_ wPaint_canvas'）。 もし（設定）{ canvas.settings [オプション] = 設定。 返す 真 ; } 他{ 戻りcanvas.settings [オプション]。 } } 他に 返す はfalse ; } を返す この .eachを（関数（）{ // ここにいくつかのコードを実行します } }
以上10は、実質的にjQueryの開発にプラグイン、およびテンプレートの開発として機能することができるコアを覆っています。基本的なコードのセットは、大幅に開発時間を短縮することができ、あなたはときに、より自信を持ってプラグインアーキテクチャを設計することができます。
ます。https：//www.cnblogs.com/JoannaQ/p/3157948.htmlで再現