1。オープニング分析
やあみんな！以前の記事をまだ覚えていますか-----このシリーズの始まり（JavaScriptプラグイン開発チュートリアル1）。それは主に「jQueryでプラグインを開発する方法」の物語を語っています、
したがって、今日は昨日の質問でプラグイン開発の旅を続けます。以前の質問は次のとおりです。
（1）プロジェクト技術の選択とこれらのプラグインの交換が「jQuery」メカニズムに依存している場合、以前に書いたプラグインは使用されません（jqueryが使用されていないと仮定）、それをリファクタリングする方法は？
（2）プラグインの重要なロジックをリファクタリングして、それをどのように整理しますか？
さて、今日の記事を質問してみましょう。
まず第一に、「jQueryプラグインメソッド」を否定しません。第二に、「jqueryプラグインには次の利点がある」など、さまざまな視点から問題を分析する必要があります。
（1）すべてのコードを閉鎖に入れます（インスタント実行機能）。この時点で、閉鎖はプライベートスコープと同等です。外部は内部情報にアクセスできず、グローバル変数の汚染はありません。
（2）、a）グローバル依存関係を避けます。 b）サードパーティの損傷を避けます。 c）jQueryオペレーターの$ 'および「jQuery」と互換性があります。
それでは、オブジェクト指向のアイデア（OOP）はどのようにコードを整理しますか？または、プロセスベースのアイデアに進む必要がありますか？それとも、2つの組み合わせですか？ハハハ、見続けてください。 。 。 。 。 。
2。昨日の例を再構築します
以下は、昨日のJSパーツのソースコード部分です。
コードコピーは次のとおりです。
（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）、設定したタイトルテキスト情報を表示します。
（2）非同期平均を通じてコンテンツ情報を動的に取得します。
大丈夫！要件が明確であれば、それについて議論するのは簡単です。上記のコードから、ロジックが緩んでおり、プロセスベースの思考が明らかであることを確認するのは難しくありません。
クラスの方法で効果的に整理します。参照されたコードを次のように見てください。
コードコピーは次のとおりです。
$（function（）{
$（ "＃bb"）。bigbear（）;
}）;
（function（$）{
$ .fn.bigbear = function（opts）{
opts = $ .extend（{}、$。fn.bigbear.defaults、opts）;
return this.eact（function（）{
var elem = $（this）;
var bb = new Bigbear（Elem、opts）;
bb.getElem（）。トリガー（ "data"）;
}）;
};
$ .fn.bigbear.defaults = {
タイトル：「これは簡単なテストです」、
URL：「data.json」
};
}）（jQuery）;
function bigbear（elem、opts）{
this.elem = elem;
this.opts = opts;
this.init（）;
};
var bbproto = bigbear.prototype;
bbproto.getElem = function（）{
this.elemを返します。
};
bbproto.getopts = function（）{
this.optsを返します。
};
bbproto.init = function（）{
var that = this;
this.getElem（）。on（ "data"、function（）{
that._settitle（that.getopts（）["title"]）;
$ .get（that.getopts（）["url"]、function（result）{
that.getElem（）。find（ "div"）。text（result ["text"]）;
}）;
}）;
};
bbproto._settitle = function（text）{
this.getElem（）。find（ "span"）。text（text）;
};
ハハハ、もっとたくさんのコードはありますか？実際、この方法は、オブジェクト指向の観点から問題を調べ、最初に機能要件を分析し、次にクラスを設計することです。一度に非常にうまく設計することは不可能ですが。
ただし、問題の視点が変化し、コードがより読みやすくなり、目的を達成できるように、コードをより良く維持できます。
以下は、以下に示すように、「ブートストラップ」JSセクションから抜粋された関連するソースコードの実装です。
同様の実装方法もあることを確認することは難しくありません。これは、クラスを通じてプラグインの主なロジックを維持しています。
（iii）、新しい機能を追加し、追加のクラスを導入します
これで需要が増加し、経験に何らかの変化が必要であり、データをロードするときに「読み込み」効果があります。
実装のアイデアは次のようになります。テキストを元のコンテンツ領域で「ロードデータ...」という単語に設定し、次のように新しいクラスを紹介します。
コードコピーは次のとおりです。
関数オーバーレイ（）{
};
var olproto = overlay.prototype;
olproto.show = function（）{};
olproto.hide = function（）{};
//特定の実装を書き留めません
さて、マスク層はすでにそこにありますが、どうすればそれを統合できますか？次のように、組み合わせでアクセスします。
コードコピーは次のとおりです。
function bigbear（elem、opts）{
this.elem = elem;
this.opts = opts;
this.overlay = new overlay（）;
this.init（）;
};
var bbproto = bigbear.prototype;
bbproto.getElem = function（）{
this.elemを返します。
};
bbproto.getopts = function（）{
this.optsを返します。
};
bbproto.init = function（）{
var that = this;
var loadingText = "データロード....";
this.getElem（）。on（ "data"、function（）{
that._settitle（that.getopts（）["title"]）;
that.overlay.show（）;
that.getElem（）。find（ "div"）。text（loadingtext）;
$ .get（that.getopts（）["url"]、function（result）{
that.overlay.hide（）;
that.getElem（）。find（ "div"）。text（result ["text"]）;
}）;
}）;
};
bbproto._settitle = function（text）{
this.getElem（）。find（ "span"）。text（text）;
};
これは私たちの関数の終わりのためだけです。このように書かれたプラグインは、最初のバージョンよりもはるかに優れていると思います。もちろん、これは最適な実装ではなく、詳細から常にリファクタリングする必要がありますが、この方法はプラグインを開発するオプションの方法です。
これが完全なコードです：
コードコピーは次のとおりです。
$（function（）{
$（ "＃bb"）。bigbear（）;
}）;
（function（$）{
$ .fn.bigbear = function（opts）{
opts = $ .extend（{}、$。fn.bigbear.defaults、opts）;
return this.eact（function（）{
var elem = $（this）;
var bb = new Bigbear（Elem、opts）;
bb.getElem（）。トリガー（ "data"）;
}）;
};
$ .fn.bigbear.defaults = {
タイトル：「これは簡単なテストです」、
URL：「data.json」
};
}）（jQuery）;
function bigbear（elem、opts）{
this.elem = elem;
this.opts = opts;
this.overlay = new overlay（）;
this.init（）;
};
var bbproto = bigbear.prototype;
bbproto.getElem = function（）{
this.elemを返します。
};
bbproto.getopts = function（）{
this.optsを返します。
};
bbproto.init = function（）{
var that = this;
var loadingText = "データロード....";
this.getElem（）。on（ "data"、function（）{
that._settitle（that.getopts（）["title"]）;
that.overlay.show（）;
that.getElem（）。find（ "div"）。text（loadingtext）;
$ .get（that.getopts（）["url"]、function（result）{
that.overlay.hide（）;
that.getElem（）。find（ "div"）。text（result ["text"]）;
}）;
}）;
};
bbproto._settitle = function（text）{
this.getElem（）。find（ "span"）。text（text）;
};
関数オーバーレイ（）{
};
var olproto = overlay.prototype;
olproto.show = function（）{};
olproto.hide = function（）{};
//特定の実装を書き留めません
この記事は今のところ終わりました。 JavaScriptのプラグイン開発についての新しい理解はありますか？