1。オープニング分析
今日のこの記事で私たちは何を言いますか？ hehehehe。次に、前の記事の欠点を再構築し、理解しやすい方法で段階的に分析しました。ナンセンスが少なく、ポイントに到達します。最初に前のものをレビューしましょう
JSパーツコードは次のとおりです。
コードコピーは次のとおりです。
function itemselector（elem、opts）{
this.elem = elem;
this.opts = opts;
};
var isproto = itemselector.prototype;
isproto.getElem = function（）{
this.elemを返します。
};
isproto.getopts = function（）{
this.optsを返します。
};
/*データマニップ*/
isproto._setCurrent = function（current）{
this.getopts（）["current"] = current;
};
isproto.getCurrentValue = function（current）{
this.getopts（）["current"];
};
/*データマニップ*/
isproto.init = function（）{
var that = this;
this.getopts（）["current"] = null; //データカーソル
this._setItemValue（this.getopts（）["currentText"]）;
var itemselem = that.getElem（）。find（ "。content .items"）;
this.getElem（）。find（ "。titlediv"）。on（ "click"、function（）{
itemselem.toggle（）;
}）;
this.getElem（）。find（ "。titlespan"）。on（ "click"、function（）{
itemselem.toggle（）;
}）;
$ .each（this.getopts（）["items"]、function（i、item）{
item ["id"] =（new date（）。getTime（））。toString（）;
that._render（item）;
}）;
};
isproto._setItemValue = function（value）{
this.getElem（）。find（ "。titlediv"）。text（value）
};
isproto._render = function（item）{
var that = this;
var itemelem = $（ "<div> </div>"）
.text（item ["text"]）
.attr（ "id"、item ["id"]）;
if（ "0" == item ["disabled"]）{
itemelem.on（ "click"、function（）{
var onchange = that.getopts（）["change"];
that.getElem（）。find（ "。content .items"）。hide（）;
that._setItemValue（item ["text"]）;
that._setCurrent（item）;
onchange && onchange（item）;
}）
.MouseOver（function（）{
$（this）.addclass（ "item-hover"）;
}）
.mouseout（function（）{
$（this）.removeclass（ "item-hover"）;
}）;
}
それ以外{
itemelem.css（ "color"、 "＃ccc"）。on（ "click"、function（）{
that.getElem（）。find（ "。content .items"）。hide（）;
that._setItemValue（item ["text"]）;
}）;
}
itemelem.appendto（this.getElem（）。find（ "。content .items"）））;
};
効果は、下の図に示されています。
a）--------操作不能な状態
b）------操作可能な状態
（ii）アイデアを開き、再構築します
コードから、「JS」の構文特性を通じてオブジェクト指向の方法で効果的に編成されていることを確認することは難しくありません。
（1）繰り返しが多すぎます
（2）責任の分割は不明です
（3）プロセスは完全ではありません
上記のポイントに基づいて効果的にリファクタリングしました。まず、このコンポーネントの要件を整理する必要があり、機能ポイントは次のとおりです。
（1）構成コンポーネントを初期化します
コードコピーは次のとおりです。
$（function（）{
var itemselector = new ItemSelector（$（ "＃item-Selector"）、{
currentText：「アイテムを選択してください」、
アイテム：[
{
テキスト：「JavaScript」、
価値：「JS」、
無効： "1"
}、
{
テキスト：「CSS」、
価値：「CSS」、
無効：「0」
}、
{
テキスト：「HTML」、
価値：「HTML」、
無効：「0」
}
]、、
}）;
ItemSelector.init（）;
}）;
このコードは非常に明確で、変更は必要ありませんが、複数のオプションをサポートする構成アイテム「モード」を追加するなど、上記の構成に基づいて関数を拡張できます。たとえば、「チェックボックスチェックモード」。
次は、次のように初期化ロジックを完了することです。
コードコピーは次のとおりです。
isproto.init = function（）{
var that = this;
this.getopts（）["current"] = null; //データカーソル
this._setItemValue（this.getopts（）["currentText"]）;
var itemselem = that.getElem（）。find（ "。content .items"）;
this.getElem（）。find（ "。titlediv"）。on（ "click"、function（）{
itemselem.toggle（）;
}）;
this.getElem（）。find（ "。titlespan"）。on（ "click"、function（）{
itemselem.toggle（）;
}）;
$ .each（this.getopts（）["items"]、function（i、item）{
item ["id"] =（new date（）。getTime（））。toString（）;
that._render（item）;
}）;
};
このコードには多くの問題があり、不明確な責任があり、初期化ロジックには機能ポイントの詳細な実装が含まれています。
レンダリングコードを引き続き表示します。
コードコピーは次のとおりです。
isproto._render = function（item）{
var that = this;
var itemelem = $（ "<div> </div>"）
.text（item ["text"]）
.attr（ "id"、item ["id"]）;
if（ "0" == item ["disabled"]）{
itemelem.on（ "click"、function（）{
var onchange = that.getopts（）["change"];
that.getElem（）。find（ "。content .items"）。hide（）;
that._setItemValue（item ["text"]）;
that._setCurrent（item）;
onchange && onchange（item）;
}）
.MouseOver（function（）{
$（this）.addclass（ "item-hover"）;
}）
.mouseout（function（）{
$（this）.removeclass（ "item-hover"）;
}）;
}
それ以外{
itemelem.css（ "color"、 "＃ccc"）。on（ "click"、function（）{
that.getElem（）。find（ "。content .items"）。hide（）;
that._setItemValue（item ["text"]）;
}）;
}
itemelem.appendto（this.getElem（）。find（ "。content .items"）））;
};
問題は明らかです。繰り返し可能な操作が見つかり、合理的な抽象化を実行する必要があり、再利用の目的が達成されました。
建設プロセス全体には、初期化、レンダリング（イベントバインディング）、および関連するデータ操作方法とDOM操作の補助方法が含まれます。
要約すると、単純なソートの後、機能の運用目的とプロセスのメインラインのタスク割り当てを確立する必要があります。それぞれが独自の責任を負います。
ですから、再建の目的は非常に明確です。それは、機能的なポイントを抽象化し、責任を友好的な部門と分割することです。それで、どうすればそれを達成しますか？
最初のステップは、プロセス関数を確立することです：（メソッドインターフェイス）
コードコピーは次のとおりです。
isproto.init = function（）{
//ここにコードを入れてください！
};
isproto._render = function（）{
//ここにコードを入れてください！
};
パート2：抽象メソッドインターフェイスを確立します。
コードコピーは次のとおりです。
isproto._fnitemselectordelegatehandler = function（）{
//ここにコードを入れてください！
};
isproto._fntriggerhandler = function（）{
//ここにコードを入れてください！
};
isproto._addorremoveclass = function（）{
//ここにコードを入れてください！
};
3番目のステップは、データ操作インターフェイスを確立することです。
コードコピーは次のとおりです。
isproto._setCurrent = function（）{
//ここにコードを入れてください！
};
isproto._getCurrent = function（）{
//ここにコードを入れてください！
};
以下の完全なソースコードへのいくつかの参照もあります。これは、ここで言及されているアイデアにすぎません。
（iii）、完全なコードは学習用で、このコードはテストされています
コードコピーは次のとおりです。
function itemselector（elem、opts）{
this.elem = elem;
this.opts = opts;
this.current = -1; //データカーソル
};
var isproto = itemselector.prototype;
/* getter api*/
isproto.getElem = function（）{
this.elemを返します。
};
isproto.getopts = function（）{
this.optsを返します。
};
isproto._getCurrent = function（）{
this.currentを返します。
};
/* getter api*/
/*データマニップ*/
isproto._setCurrent = function（current）{
this.current = current;
};
isproto._setItemtext = function（text）{
this.getElem（）。find（ "。titlediv"）。text（text）;
};
/*データマニップ*/
/ * 2015年の更新1/31 23:38 */
isproto._fntriggerhandler = function（index、text、value）{
if（this._isdisabled（value））{
index = -1;
text = this.getopts（）["currentText"];
}
this._setItemText（テキスト）;
this._setCurrent（index）;
this.getElem（）。find（ "。content .items"）。hide（）;
};
isproto._addorremoveclass = function（elem、classname、addis）{
if（addis）{
Elem.AddClass（className）;
}
それ以外{
Elem.RemoveClass（className）;
}
};
isproto._fnitemselectordelegatehandler = function（）{
var that = this;
this.getElem（）。on（ "click"、 "[data-toggle]"、function（）{
that.getElem（）。find（ "。content .items"）。toggle（）;
}）;
};
isproto._isdisabled = function（value）{
return（ "1" ==値）？ True：false;
};
/ * 2015年の更新1/31 23:38 */
isproto.init = function（）{
var that = this;
this._fnitemselectordelegatehandler（）;
$ .each（this.getopts（）["items"]、function（i、item）{
item ["index"] = i;
that._render（item）;
}）;
this._fntriggerhandler（this._getCurrent（）、this.getopts（）["currentText"]、 "1"）;
};
isproto._render = function（item）{
var that = this;
var itemelem = $（ "<div> </div>"）。text（item ["text"]）。attr（ "id"、item ["index"]）;
var activeclass =（ "0" == item ["disabled"]）？ 「アイテムホーバー」：「アイテム障害者ホーバー」。
itemelem.on（ "click"、function（）{
that._fntriggerhandler（item ["index"]、item ["text"]、item ["disabled"]）;
}）
.MouseOver（function（）{
that._addorremoveclass（$（this）、activeclass、true）;
}）
.mouseout（function（）{
that._addorremoveclass（$（this）、activeclass、false）;
}）;
itemelem.appendto（this.getElem（）。find（ "。content .items"）））;
};
（iv）、最終要約
（1）オブジェクト指向の考え方における機能要件の合理的な分析。
（2）、クラスの方法でプラグインロジックを整理します。
（3）上記の例を継続的に再構築します。それを合理的に再構築する方法は？過度に設計しないでください、安心してください。推奨される方法は、プロセス設計とオブジェクト指向の思考デザインを組み合わせることです。
（4）次の記事では、プロパティ「モード」などの関連関数を拡張します。 「1」の場合、チェックボックスのマルチセレクトモードをサポートしますが、今ではデフォルトのドロップダウンモードにすぎません。
私の記事を見ると、前のコードよりもはるかに優れていますか？友人は、自分でより多くのプロジェクトについて考え、より多くのプロジェクトを行い、独自のコードをよりリーズナブルにしようとする必要があります。