1。オープニング分析
こんにちは、あなたはまだ前の記事を覚えていますか？それは主に、「タブ」プラグインがコードを整理し、それを実装する方法と、オブジェクト指向の思考デザインとプロセス設計をどのように組み合わせるかを示しています
プラグインを設計する方法は？ 2つの方法には、お互いの長所と短所から学ぶための独自の利点と欠点があります。この一連の記事は学習指向であり、誰もが特定のシナリオの使用方法を決定します。この記事から、その「タブ」インスタンスに焦点を当てています。
関連する関数の拡張を続けます。 heheheは、ナンセンスが少ないと言って、ポイントに到達します。実際のレンダリングについて直接：
あなたはそれを見ました、そして、新しい機能が追加されました。初期化時のモジュール構成情報項目のエントリ数が指定したものよりも大きい場合、「moorモジュール」で表示されます。
操作項目の非表示リストでは、初期化パラメーター構成も新しく調整されています。たとえば、初期化時のエントリ数を指定する追加の「DisplayMax」や、アイテム属性、「ステータス」を指定しています。
初期化中、構成は不要です。プログラムで動的構成が生成され、プログラムの柔軟性が向上します。以下で詳細に分析しましょう。
（ii）、症例分析
（1）最初に、このプラグインが何をするかを決定します。プラグインの呼び出し方法と構成パラメーターの説明を見てみましょう。次のコード：
コードコピーは次のとおりです。
{
Buttontext：「モジュールを追加」、
結果： [
{
テキスト：「ウィザードプロンプト」、
URL：「help.html」、
showclose： "0"
}、
{
テキスト：「学生情報」、
URL：「info.html」、
showclose： "1"
}、
{
テキスト：「学生分類」、
URL：「category.html」、
showclose： "1"
}、
{
テキスト：「Big Bear {{Bb}}」、
URL：「bb.html」、
showclose： "1"
}、
{
テキスト：「ベータテストモジュール」、
URL：「test.html」、
showclose： "1"
}、
{
テキスト：「3人の太った男性」、
URL：「help.html」、
showclose： "1"
}、
{
テキスト：「4人のbげた男性」、
URL：「help.html」、
showclose： "1"
}
]、、
DisplayMax：5 //最大表示アイテム
}
「bigbear.ui.createtab」には2つのパラメーターが含まれています。 1つ目はDOMノードオブジェクトで、2つ目はプラグインパラメーターオプションです。 「Buttontext」は、「タブ」プラグインの操作ボタンのテキストの説明を表します。
「結果」は、テキストの説明を含むタブ項目のプロパティを含む配列です。タブ項目をクリックするときに使用されるURL「showclose」は、タブオプションに閉じるボタンを表示するかどうかを表します。
「ステータス」も初期化中に削除され、構成は必要ありません。また、構成はプログラムで動的に生成されます。閉じた状態があります。これは、1つのデフォルトディスプレイ、0オフステータス、およびエントリのデフォルト数を2つ以上に表します。
（2）関数は段階で導入されます
1 ---、オプションのパラメーターを介してプラグインを初期化します。
コードコピーは次のとおりです。
$（function（）{
bigbear.ui.createtab（$（ "＃tab"）、{
Buttontext：「モジュールを追加」、
結果： [
{
テキスト：「ウィザードプロンプト」、
URL：「help.html」、
showclose： "0"
}、
{
テキスト：「学生情報」、
URL：「info.html」、
showclose： "1"
}、
{
テキスト：「学生分類」、
URL：「category.html」、
showclose： "1"
}、
{
テキスト：「Big Bear {{Bb}}」、
URL：「bb.html」、
showclose： "1"
}、
{
テキスト：「ベータテストモジュール」、
URL：「test.html」、
showclose： "1"
}、
{
テキスト：「3人の太った男性」、
URL：「help.html」、
showclose： "1"
}、
{
テキスト：「4人のbげた男性」、
URL：「help.html」、
showclose： "1"
}
]、、
DisplayMax：5 //最大表示アイテム
}）;
}）;
2 ---、初期化中のエントリ数の検証など、レンダリングおよび完全な時間拘束力と関連するビジネスロジック。
コードコピーは次のとおりです。
tabproto.init = function（）{
if（this._isemptyresult（））{
this._setContent（ "モジュールなし！"）;
}
var that = this;
this.getElem（）。find（ "。title.adder"）
.text（ " +" + this.getopts（）["buttontext"]）
.on（ "click"、function（）{
that.getElem（）。find（ "。コンソールパネル"）。slidetoggle（function（）{
that._renderconsolepanel（ "0"）;
}）;
}）;
$ .each（this.getopts（）["result"]、function（i、item）{
if（that._isdisplaymax（i + 1））{
that._saveorupdateStatus（item、 "1"）;
}
それ以外{
that._saveorupdatestatus（item、 "2"）;
}
that._render（item）;
}）;
if（！that._isdisplaymax（this.getopts（）["result"]。length））{
this.getElem（）。find（ "。title.more-mod"）。fadein（function（）{
$（this）.find（ "。tag"）。on（ "click"、function（）{
var root = $（this）.next（）;
root.empty（）;
$ .each（that._getitemlistbystatus（ "2"）、function（i、data）{
$（ "<div> </div>"）。text（data ["text"]））
.on（ "click"、function（）{
if（that._getItemlistbystatus（ "1"）。長さ<that.getopts（）["displaymax"]）{
that.getElem（）。find（ "。title.items div"）。eq（data ["index"]）。fadein（function（）{
that._saveorupdatestatus（data、 "1"）;
}）;
}
それ以外{
Alert（「モジュールは追加できませんが、現在最大数です！」）;
}
}）
.appendto（root）;
}）;
root.toggle（）;
}）;
}）;
}
this.getElem（）。find（ "。title.items div"）
.eq（0）
.trigger（ "click"）; //それがなければならないと仮定します。そうしないと、プラグインはあまり意味がありません！
};
3 ---、タブの切り替えとデータコンテンツのレンダリング操作。
コードコピーは次のとおりです。
tabproto._setCurrent = function（index）{
var items = this.getElem（）。find（ "。title.items div"）。removeclass（ "Active"）;
items.eq（index）.addclass（ "Active"）;
var contents = this.getElem（）。find（ "。content.c"）。hide（）;
contents.eq（index）.show（）;
};
コードコピーは次のとおりです。
item.on（ "click"、function（）{
that._setCurrent（$（this）.index（））;
that._getContent（data ["url"]）。done（function（result）{
that._setContent（result）;
}）
.fail（function（）{
新しいエラー（ "Net Error！"）;
}）;
}）
コードコピーは次のとおりです。
tabproto._setcontent = function（html）{
this.getElem（）。find（ "。content"）。html（html）;
};
tabproto._getContent = function（url）{
$ .ajaxを返します（{
URL：URL
}）;
};
4 ---、コア補助データ操作方法にはDOMが含まれません。
コードコピーは次のとおりです。
/ * 2015年1月15:36の更新時間 */
tabproto._isdisplaymax = function（size）{
var displasmax = this.getopts（）["displaymax"] || 5;
return（size <= displaymax）？ True：false;
};
tabproto._isemptyresult = function（）{
if（！this.getopts（）["result"]。length）{
falseを返します。
}
trueを返します。
};
tabproto._saveorupdatestatus = function（item、status）{
item ["status"] = status;
};
tabproto._getitemlistbystatus = function（status）{
var list = [];
var result = this.getopts（）["result"];
$ .each（result、function（i、item）{
if（status == item ["status"]））{
list.push（item）;
}
}）;
返品リスト。
};
tabproto._getStatusbyIndex = function（index）{
var status = null;
var result = this.getopts（）["result"];
$ .each（result、function（i、item）{
if（index == item ["index"]）{
status = item ["status"];
}
}）;
戻りステータス。
};
（iii）、学習のための完全なコード、このコードは、ディレクトリ構造や関連ファイルを含むテストされています。
1、HTML
コードコピーは次のとおりです。
<body>
<div>
Big Bear {{bb}} -dxj ui ------タブ
</div>
<div>
<div id = "tab">
<div>
<div>
+学生情報を追加します
</div>
<div>
<！ - <div> <span> x </span>ウェルカムページ</div>
<div> <span> x </span>ユーザー管理</div>
<div> <span> x </span> bigbear </div> - >
</div>
<div>
<div>その他のモジュール</div>
<div>
</div>
</div>
</div>
<div>
</div>
<div>
<！ - <div>
<div> <span> name：</span> <入力型= "text"/> </div>
<div> <span>注：</span> <textarea> </textarea> </div>
</div> <div> <入力型= "button" value = "save"/> </div>
- >
</div>
</div>
</div>
</body>
2、CSS
コードコピーは次のとおりです。
.dxj-ui-hd {
パディング：0px;
マージン：0 Auto;
マージントップ：30px;
幅：780px;
高さ：60px;
Line-Height：60px;
背景：＃3385ff;
色：#ffff;
フォントファミリー：「Microsoft Yahei」;
フォントサイズ：28px;
テキストアライグ：センター;
font-weight：bold;
}
.dxj-ui-bd {
パディング：0px;
マージン：0 Auto;
幅：778px;
パディングトップ：30px;
パディングボトム：30px;
オーバーフロー：隠し;
国境：1pxソリッド＃3385ff;
}
.dxj-ui-bd #tab {
パディング：0px;
マージン：0 Auto;
幅：720px;
オーバーフロー：隠し;
位置：相対;
}
.dxj-ui-bd #tab .title {
幅：720px;
オーバーフロー：隠し;
国境圏：2pxソリッド＃3385ff;
}
.dxj-ui-bd #tab .title .adder {
幅：160px;
高さ：32px;
ラインハイト：32px;
背景：＃DC143C;
色：#ffff;
フォントファミリー：「Microsoft Yahei」;
フォントサイズ：14px;
テキストアライグ：センター;
font-weight：bold;
フロート：左;
カーソル：ポインター;
}
.dxj-ui-bd #tab .title .more-mod {
オーバーフロー：隠し;
国境：1pxソリッド＃DC143C;
幅：70px;
位置：絶対;
右：0;
マージン右：6px;
表示：なし;
}
.dxj-ui-bd #tab .title .more-mod .tag {
高さ：32px;
ラインハイト：32px;
幅：70px;
背景：＃DC143C;
色：#ffff;
フォントファミリー：arial;
フォントサイズ：12px;
テキストアライグ：センター;
カーソル：ポインター;
}
.dxj-ui-bd #tab .title .more-mod .mods {
オーバーフロー：隠し;
幅：70px;
表示：なし;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
高さ：24px;
ラインハイト：24px;
幅：62px;
フォントファミリー：arial;
フォントサイズ：12px;
カーソル：ポインター;
パディング左：10px;
}
.dxj-ui-bd #tab .title .items {
高さ：32px;
幅：480px;
オーバーフロー：隠し;
フロート：左;
}
.dxj-ui-bd #tab .title .items div {
パディング：0px;
マージン左：10px;
幅：84px;
高さ：32px;
ラインハイト：32px;
背景：＃3385ff;
色：#ffff;
フォントファミリー：arial;
フォントサイズ：12px;
テキストアライグ：センター;
位置：相対;
フロート：左;
カーソル：ポインター;
}
.dxj-ui-bd #tab .title .items div span.del {
幅：16px;
高さ：16px;
ラインハイト：16px;
表示：ブロック;
背景：＃DC143C;
位置：絶対;
右：0;
上：0;
カーソル：ポインター;
}
.dxj-ui-bd #tab .content {
幅：716px;
パディングトップ：30px;
オーバーフロー：隠し;
国境：2pxソリッド＃3385ff;
ボーダートップ：0px;
Min-Height：130px;
テキストアライグ：センター;
}
.dxj-ui-bd #tab .contentテーブル{
マージン：0 Auto;
}
.dxj-ui-bd #tab .content div.c {
パディングトップ：20px;
パディング左：20px;
背景：#eee;
高さ：140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
マージントップ：10px;
フォントファミリー：arial;
フォントサイズ：12px;
}
.dxj-ui-bd #tab .console-panel {
幅：716px;
パディングトップ：20px;
パディングボトム：20px;
オーバーフロー：隠し;
国境：2pxソリッド＃3385ff;
ボーダートップ：0px;
国境圏：2pxソリッド＃3385ff;
背景：#fff;
表示：なし;
}
。アクティブ {
font-weight：bold;
}
3、bigbear.js
コードコピーは次のとおりです。
（function（$）{
var win = window;
var bb = win.bigbear = win.bigbear || {
UI：{}
};
var ui = bb.ui = {};
var tab = function（elem、opts）{
this.elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
/ * 2015年1月15:36の更新時間 */
tabproto._isdisplaymax = function（size）{
var displasmax = this.getopts（）["displaymax"] || 5;
return（size <= displaymax）？ True：false;
};
tabproto._isemptyresult = function（）{
if（！this.getopts（）["result"]。length）{
falseを返します。
}
trueを返します。
};
tabproto._saveorupdatestatus = function（item、status）{
item ["status"] = status;
};
tabproto._getitemlistbystatus = function（status）{
var list = [];
var result = this.getopts（）["result"];
$ .each（result、function（i、item）{
if（status == item ["status"]））{
list.push（item）;
}
}）;
返品リスト。
};
tabproto._getStatusbyIndex = function（index）{
var status = null;
var result = this.getopts（）["result"];
$ .each（result、function（i、item）{
if（index == item ["index"]）{
status = item ["status"];
}
}）;
戻りステータス。
};
tabproto._renderconsolepanel = function（status）{
var that = this;
var root = that.getElem（）。find（ "。コンソールパネル"）;
this._resetconsolepanel（）;
$ .each（that._getitemlistbystatus（status）、function（i、item）{
var elem = $（ "<div style = 'float：left';> </div>"）。appendto（root）;
$（ "<input type = 'radio' name = 'addMod' />"）
.data（ "item"、item）
.appendto（elem）;
$（ "<span> </span>"）。text（item ["text"]）。
}）;
if（root.find（ "div"）。size（））{
$（ "<input type = 'button' value = 'モジュールの追加'スタイル= 'マージン左：20px'/>"）
.on（ "click"、function（）{
var data = root.find（ "input [type = radio]：checked"）。data（ "item"）;
if（that._getItemlistbystatus（ "1"）。長さ<that.getopts（）["displaymax"]）{
that.getElem（）。find（ "。title.items div"）。eq（data ["index"]）。fadein（function（）{
that._saveorupdatestatus（data、 "1"）;
}）
.trigger（ "click"）;
}
それ以外{
that._saveorupdateStatus（data、 "2"）;
}
that.getElem（）。find（ "。title.adder"）。トリガー（ "click"）;
}）
.appendto（root）;
}
それ以外{
root.text（ "まだ追加するアイテムはありません！"）;
}
};
/ * 2015年1月15:36の更新時間 */
tabproto._setCurrent = function（index）{
var items = this.getElem（）。find（ "。title.items div"）。removeclass（ "Active"）;
items.eq（index）.addclass（ "Active"）;
var contents = this.getElem（）。find（ "。content.c"）。hide（）;
contents.eq（index）.show（）;
};
tabproto.getElem = function（）{
this.elemを返します。
};
tabproto.getopts = function（）{
this.optsを返します。
};
tabproto._resetcontent = function（）{
this.getElem（）。find（ "。content"）。html（ ""）;
};
tabproto._setcontent = function（html）{
this.getElem（）。find（ "。content"）。html（html）;
};
tabproto._getContent = function（url）{
$ .ajaxを返します（{
URL：URL
}）;
};
tabproto._deleteitem = function（elem）{
var that = this;
this.getElem（）。find（ "。title.items div"）
.eq（elem.index（））
.fadeout（function（）{
that._resetcontent（）;
that._saveorupdatestatus（elem.data（ "item"）、 "0"）;
that._triggeritem（elem.index（） + 1）;
}）;
};
tabproto._triggeritem = function（next）{
var nextStatus = this._getStatusbyIndex（next）;
var items = this.getElem（）。find（ "。title.items div"）;
next = items.eq（next）;
if（next.size（）&& "1" == nextStatus）{//後続のdomノードが存在する
next.trigger（ "click"）;
}
それ以外{
items.eq（0）.trigger（ "click"）;
}
};
tabproto._resetconsolepanel = function（）{
this.getElem（）。find（ "。コンソールパネル"）。empty（）;
};
tabproto.init = function（）{
if（this._isemptyresult（））{
this._setContent（ "モジュールなし！"）;
}
var that = this;
this.getElem（）。find（ "。title.adder"）
.text（ " +" + this.getopts（）["buttontext"]）
.on（ "click"、function（）{
that.getElem（）。find（ "。コンソールパネル"）。slidetoggle（function（）{
that._renderconsolepanel（ "0"）;
}）;
}）;
$ .each（this.getopts（）["result"]、function（i、item）{
if（that._isdisplaymax（i + 1））{
that._saveorupdateStatus（item、 "1"）;
}
それ以外{
that._saveorupdatestatus（item、 "2"）;
}
that._render（item）;
}）;
if（！that._isdisplaymax（this.getopts（）["result"]。length））{
this.getElem（）。find（ "。title.more-mod"）。fadein（function（）{
$（this）.find（ "。tag"）。on（ "click"、function（）{
var root = $（this）.next（）;
root.empty（）;
$ .each（that._getitemlistbystatus（ "2"）、function（i、data）{
$（ "<div> </div>"）。text（data ["text"]））
.on（ "click"、function（）{
if（that._getItemlistbystatus（ "1"）。長さ<that.getopts（）["displaymax"]）{
that.getElem（）。find（ "。title.items div"）。eq（data ["index"]）。fadein（function（）{
that._saveorupdatestatus（data、 "1"）;
}）;
}
それ以外{
Alert（「モジュールは追加できませんが、現在最大数です！」）;
}
}）
.appendto（root）;
}）;
root.toggle（）;
}）;
}）;
}
this.getElem（）。find（ "。title.items div"）
.eq（0）
.trigger（ "click"）; //それがなければならないと仮定します。そうしないと、プラグインはあまり意味がありません！
};
tabproto._render = function（data）{
var that = this;
var item = $（ "<div> </div>"）。text（data ["text"]）。
data ["index"] = item.index（）;
item.on（ "click"、function（）{
that._setCurrent（$（this）.index（））;
that._getContent（data ["url"]）。done（function（result）{
that._setContent（result）;
}）
.fail（function（）{
新しいエラー（ "Net Error！"）;
}）;
}）
.data（ "item"、data）;
if（ "2" == data ["status"]）{
item.hide（）;
}
if（ "1" == data ["showclose"]）{
$（ "<span class = 'del'> x </span>"）
.on（ "click"、function（）{
if（win.confirm（ "このアイテムは削除されますか？"））{
that._deleteitem（item）;
falseを返します。 //バブルを停止します
}
}）
.appendto（item）;
}
};
ui.createTab = function（elem、opts）{
var tab = new Tab（Elem、Opts）;
tab.init（）;
[戻り]タブ。
};
}）（jQuery）;
（iv）、最終要約
（1）オブジェクト指向の考え方における機能要件の合理的な分析。
（2）、クラスの方法でプラグインロジックを整理します。
（3）上記の例を継続的に再構築します。それを合理的に再構築する方法は？過度に設計しないでください、安心してください。推奨される方法は、プロセス設計とオブジェクト指向の思考デザインを組み合わせることです。