1。オープニング分析
やあみんな！今日の一連の記事は、主に「JavaScript」に基づいてプラグイン開発を開発する方法について説明しています。多くの人は「プラグイン」という言葉に不慣れではないと思います。
一部の人々は、それを「コンポーネント」または「コンポーネント」と呼ぶかもしれませんが、これは重要ではありません。重要なのは、設計方法と包括的な考慮方法を検討することです。これは、この記事が焦点を当てている概念です。誰もが正しいと思います
「jQueryプラグインメソッド」については、特定の理解があります。このトピックに基づいて一緒に議論し、最終的に関連する実装計画を提供して、能力を継続的に改善します。
2。プラグイントピックを入力します
一般的に、jQueryプラグインの開発は2つのタイプに分けられます。1つはjQueryネームスペースの下にぶら下がっているグローバル関数であり、静的メソッドとも呼ばれます。
別の方法は、jQueryオブジェクトレベルのメソッド、つまりjQueryプロトタイプの下に掛けられている方法です。そのため、セレクターを介して取得されたjQueryオブジェクトインスタンスもメソッドを共有できます。
（1）、クラスレベルのプラグイン開発
クラスレベルのプラグイン開発の最も直接的な理解は、「jQuery」クラスにクラスメソッドを追加することです。これは、静的な方法を追加すると理解できます。典型的な例は、jquery名空間の関数を定義する関数「$ .ajax（）」です。クラスレベルのプラグインの開発については、次の形式で拡張できます。
1.1グローバル関数を追加すると、次のように定義してコードを確認する必要があります。
コードコピーは次のとおりです。
$ .hello = function（）{
アラート（「こんにちは、ビッグベア！」）;
};
1.2複数のグローバル関数を追加します。これは次のように定義できます。
コードコピーは次のとおりです。
$ .extend（{
こんにちは：function（name）{
//ここにコードを置きます
}、
世界：function（）{
//ここにコードを置きます
}
}）;
説明： "$ .extend（target、[object1]、[objectn]）"（この方法は、主に2つ以上のオブジェクトのコンテンツ（属性）を最初のオブジェクトにマージし、マージされた最初のオブジェクトを返すために使用されます。
メソッドにパラメーターターゲットが1つしかない場合、パラメーターはjQueryの名前空間を拡張します。つまり、静的メソッドとしてjQueryグローバルオブジェクトの下に掛けられます）。
（2）、オブジェクトレベルのプラグイン開発
オブジェクトレベルのプラグイン開発には、2つのフォームが必要です。
2.1「$ .fn.extend（）」を介して関連する属性を動的にマウントします。
コードコピーは次のとおりです。
（function（$）{
$ .fn.extend（{
プラグインネーム：function（opts）{
//ここにコードを置きます
}
}）;
}）（jQuery）;
2.2プロトタイプチェーンに動的属性を直接追加します。
コードコピーは次のとおりです。
（function（$）{
$ .fn.pluginname = function（）{
//ここにコードを置きます
};
}）（jQuery）;
説明させてください：2つは同等です。 jQueryプラグインの場合、基本的な機能はうまく機能しますが、より複雑なプラグインの場合、さまざまな方法とプライベート機能を提供する必要があります。
さまざまな名前空間を使用してプラグインにさまざまな方法を提供できますが、名前空間を追加すると、コードが厄介で堅牢性が低くなります。したがって、最良の解決策は、プライベート機能と方法を適切に定義することです。
そのため、上記の例のように、自己実行機能と閉鎖機能を組み合わせることにより、シミュレートされたプライベートプラグインユニットを実装します。
（iii）、実装プロセスを確認するための簡単な例を示しましょう。
（1）、「HTML」フラグメントコードは次のとおりです。
コードコピーは次のとおりです。
<div id = "bb">
<span> </span>
<div
style = "マージントップ：10px;
マージンボトム：30px; "
> 8 </div>
</div>
（2）、「data.json」の定義は次のとおりです。
コードコピーは次のとおりです。
{
「テキスト」：「こんにちは、ビッグベア{{bb}}！」 ;
}
（3）、「bb.js」コードは次のとおりです。
コードコピーは次のとおりです。
$（function（）{
$（ "＃bb"）。bigbear（）;
}）;
（function（$）{
$ .fn.bigbear = function（opts）{
opts = $ .extend（{}、$。fn.bigbear.defaults、opts）;
return this.eact（function（）{
var elem = $（this）;
elem.find（ "span"）。text（opts ["title"]）;
$ .get（opts ["url"]、function（data）{
elem.find（ "div"）。text（data ["text"]）;
}）;
}）;
};
$ .fn.bigbear.defaults = {
タイトル：「これは簡単なテストです」、
URL：「data.json」
};
}）（jQuery）;
ランニング効果：
要約しましょう：
（1）「$ .fn.bigbear.defaults」は、プラグインのデフォルトのパラメーターオプションを提供します。優れた拡張性を備えたプラグインは、ユーザーがニーズに応じてパラメーターオプションをカスタマイズし、プラグインの動作を制御できるため、復元されたデフォルトオプションを提供する必要があります。これらのオプションをjQueryの拡張メソッドから設定できます。
（2）、「this.each（）{...}を返します」は複数の要素を横断し、Sizzleセレクターエンジンを使用してjQueryを返します。Sizzleは、関数にマルチエレメント操作を提供できます（同じクラス名を持つ要素など）。これはjQueryのいくつかの優れた機能の1つであり、開発中にプラグインにマルチエレメントサポートを提供する準備ができていなくても、これの準備はまだ素晴らしい方法です。さらに、jQueryにはメソッドカスケードを実行できる優れた機能があります。これはチェーンコールとも呼ばれるため、この機能を破壊したり、メソッドの要素を返すべきではありません。
（iv）、最終要約
（1）jQueryは、開発プラグインに2つの方法を導入しました。つまり、jquery.fn.extend（object）; jQueryオブジェクトにメソッドを追加します。
jquery.extend（object）;クラスに新しいメソッドを追加して、jQueryクラス自体を拡張します。
（2）すべてのコードを閉鎖に入れます（インスタント実行機能）。この時点で、閉鎖はプライベートスコープと同等です。外部は内部情報にアクセスできず、グローバル変数の汚染はありません。公式開発仕様について説明します。a）グローバル依存関係を回避します。 b）サードパーティの損傷を避けます。 c）jQueryオペレーターの$ 'および「jQuery」と互換性があります。
（3）プラグインにデフォルトのパラメーターオプションを提供します。優れた拡張性を備えたプラグインを使用すると、ユーザーはニーズに応じてパラメーターオプションをカスタマイズし、プラグインの動作を制御できます。したがって、復元されたデフォルトオプションを提供する必要があります。これらのオプションをjQueryの拡張メソッドから設定できます
（4）、複数の要素を繰り返し、Sizzleセレクターエンジンを使用してjQueryを返し、Sizzleは機能にマルチエレメント操作（同じクラス名の要素など）を提供できます。これはjQueryのいくつかの優れた機能の1つであり、開発プロセス中にプラグインにマルチエレメントサポートを提供する準備ができていなくても、これに備えることは依然として良い実践です。さらに、jQueryにはメソッドカスケードを実行できる優れた機能があります。これはチェーンコールとも呼ばれるため、この機能を破壊したり、メソッドの要素を返すべきではありません。
（5）メインループの外側に1回限りのコードを配置することが重要ですが、しばしば無視されます。簡単に言えば、プラグイン関数を呼び出すたびにインスタンス化する代わりに、1回だけインスタンス化する必要があるデフォルト値の束であるコードがある場合は、このコードをプラグインメソッドの外に配置する必要があります。
（6）学んだ後、考えてみましょう。プロジェクト技術の選択とこれらのプラグインの交換の場合、「jQuery」メカニズムに依存している場合、以前に書いたプラグインは使用されません（jqueryが使用されていないと仮定）。それをリファクタリングする方法は？
明日の記事ではこの問題について説明し、プラグインの重要なロジックをリファクタリングするため、お楽しみに。 。 。