1。オープニング分析
やあみんな！最初の2つの記事では、主に「JQuery's Way」でプラグインを開発する方法と、プロセスデザインとオブジェクト指向の思考デザインを組み合わせてプラグインを設計する方法について説明します。どちらの方法にも長所と短所があり、長所と短所から学ぶことができます。 hehehe、ナンセンスをあまり話して、ポイントに到達しましょう。実際のレンダリングについて直接：
あなたはそれを見ることができます。これはドロップダウンメニュープラグインです。私たちの毎日の開発では、システムは、それがあまり美しくなく、機能が限られていると感じさせ、ユーザーにします。
エクスペリエンスフォームとユーザーのインタラクティブ性はあまり良くありませんので、今日はHeheheheheをシミュレートします。以下で詳細に分析しましょう。
（ii）、症例分析
（1）最初に、このプラグインが何をするかを決定します。プラグインの呼び出し方法と構成パラメーターの説明を見てみましょう。次のコード：
コードコピーは次のとおりです。
$（function（）{
var itemselector = new ItemSelector（$（ "＃item-Selector"）、{
currentText：「アイテムを選択してください」、
アイテム：[
{
テキスト：「JavaScript」、
価値：「JS」、
無効： "1"
}、
{
テキスト：「CSS」、
価値：「CSS」、
無効：「0」
}、
{
テキスト：「HTML」、
価値：「HTML」、
無効：「0」
}
]、、
モード： "0"、//「1」の場合、チェックボックスマルチ選択モードをサポートします
変更：function（value）{
//ここにコードを置きます
}
}）;
ItemSelector.init（）;
setimeout（function（）{
console.log（itemselector.getCurrentValue（））; //テストして、選択したアイテムを最初に取得します
}、2000）;
「var itemselector = new ItemSelector（）」には2つのパラメーターが含まれています。 1つ目はDOMノードオブジェクトで、2つ目はプラグインパラメーターオプションです。 「currentText」は、「ItemSelector」プラグインのテキスト表示領域のテキストの説明を表します。
「アイテム」は、テキストの説明、オプション値を含む「アイテムセレクター」アイテムのプロパティを含むアレイです。
「変更」は、選択したときに操作コールバック関数を表し、オプションデータはパラメーターの形式で返されます。
（2）関与する機能は何ですか？
表示できるレンダリングは次のとおりです。
表示できないレンダリングは次のとおりです。
2つの違いは次のとおりです。不明確な状態データは返されず、浮かんでも効果はありません。
3）完全なコードは学習用です。このコードは、ディレクトリ構造や関連ファイルなど、テストされています。
（1）、HTML
コードコピーは次のとおりです。
<body>
<div>
Big Bear {{bb}} -dxj ui ------ itemselector
</div>
<div>
<div id = "item-selector">
<div>
<div> </div> <span>↓</span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
（2）、CSS
コードコピーは次のとおりです。
/ * item-selector */
＃item-Selector {
マージン：0 Auto;
幅：220px;
オーバーフロー：隠し;
ボーダー：2px solid #ccc;
}
＃item-selector .title {
ボーダーボトム：1px solid #ccc;
オーバーフロー：隠し;
}
＃item-selector .title div {
幅：190px;
国境：0px;
色：＃999;
フォントファミリー：arial;
フォントサイズ：14px;
高さ：28px;
ラインハイト：28px;
フロート：左;
カーソル：ポインター;
}
＃アイテムセレクター.titleスパン{
表示：ブロック;
高さ：30px;
Line-Height：30px;
幅：29px;
フロート：左;
テキストアライグ：センター;
国境左：1PX SOLID #CCC;
カーソル：ポインター;
}
＃item-selector .content {
幅：220px;
オーバーフロー：隠し;
}
＃item-selector .content .items {
オーバーフロー：隠し;
}
＃item-selector .content .items div {
パディング左：20px;
幅：200px;
高さ：32px;
ラインハイト：32px;
フォントファミリー：「Microsoft Yahei」;
フォントサイズ：14px;
font-weight：bold;
カーソル：ポインター;
}
.item-hover {
背景：＃3385ff;
色：#ffff;
}
（3）、「itemselector.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"）））;
};
（iv）、最終要約
（1）オブジェクト指向の考え方における機能要件の合理的な分析。
（2）、クラスの方法でプラグインロジックを整理します。
（3）上記の例を継続的に再構築します。それを合理的に再構築する方法は？過度に設計しないでください、安心してください。推奨される方法は、プロセス設計とオブジェクト指向の思考デザインを組み合わせることです。
（4）次の記事では、プロパティ「モード」などの関連関数を拡張します。 「1」の場合、チェックボックスのマルチセレクトモードをサポートしますが、今ではデフォルトのドロップダウンモードにすぎません。
この記事は最初にここにあります。後で説明し続けます。この一連の記事をお楽しみください。