1。オープニング分析
前の2つの記事では、主にjQueryでプラグインを開発する方法と、プロセス設計をオブジェクト指向の思考デザインと組み合わせる方法について話しました。
プラグインを設計する方法は？ 2つの方法には、お互いの長所と短所から学ぶための独自の利点と欠点があります。この一連の記事は学習指向であり、誰もが特定のシナリオの使用方法を決定します。そのため、本日はこの記事から始めて、例を使用して、浅いものから深いものまで独自のプラグインライブラリを開発します。 heheheは、ナンセンスが少ないと言って、ポイントに到達します。実際のレンダリングについて直接：
あなたはそれを見ることができます。これはタブプラグインです。毎日単一ページのアプリケーション（「スパ」）を作成するときに、それに出くわすかもしれません。今日の例を見てみましょう。
BS構造に基づいてシステムを構築します。これは、構造システムのすべてのコンポーネントであるいくつかのモジュールで構成されます。このプラグインを通じて、モジュールを効果的に管理できます
以下のエクスペリエンスフォームとユーザーの対話性を詳細に分析しましょう。
（ii）、症例分析
（1）最初に、このプラグインが何をするかを決定します。プラグインの呼び出し方法と構成パラメーターの説明を見てみましょう。次のコード：
コードコピーは次のとおりです。
bigbear.ui.createtab（$（ "＃tab"）、{
Buttontext：「モジュールを追加」、
結果： [
{
テキスト：「ウィザードプロンプト」、
URL：「help.html」、
showclose： "0"、
ステータス：「1」
}、
{
テキスト：「学生情報」、
URL：「info.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「学生分類」、
URL：「category.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「Big Bear {{Bb}}」、
URL：「bb.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「ベータテストモジュール」、
URL：「test.html」、
showclose： "1"、
ステータス：「1」
}
]
}）;
「bigbear.ui.createtab」には2つのパラメーターが含まれています。 1つ目はDOMノードオブジェクトで、2つ目はプラグインパラメーターオプションです。 「Buttontext」は、「タブ」プラグインの操作ボタンのテキストの説明を表します。
「結果」は、テキストの説明を含むタブ項目のプロパティを含む配列です。タブ項目をクリックするときに使用されるURL「showclose」は、タブオプションに閉じるボタンを表示するかどうかを表します。
「ステータス」はオプションのステータスを表します。オプションはデフォルトの状態であり、それぞれ1枚と0-Openとして表される閉じた状態がある場合があります。
（2）関与する機能は何ですか？
オプションのパラメーターを介して、次のように、関連するオプションエントリが動的に生成されます。
コードコピーは次のとおりです。
bigbear.ui.createtab（$（ "＃tab"）、{
Buttontext：「モジュールを追加」、
結果： [
{
テキスト：「jQueryソースコード分析」、
URL：「help.html」、
showclose： "0"、
ステータス：「1」
}、
{
テキスト：「Big Bear {{bb}}}」、
URL：「bb.html」、
showclose： "1"、
ステータス：「1」
}
]
}）;
効果は次のとおりです。
次の効果に示すように、エントリオプションを自由に追加および削除できます。
上の写真は、これらの状況の1つを示しています。モジュールがない場合、メッセージがプロンプトされます。
これは2番目のケースであり、以前に削除されたケースを復元できます。
（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> <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 .items {
高さ：32px;
マージン左：20px;
幅：540px;
オーバーフロー：隠し;
フロート：左;
}
.dxj-ui-bd #tab .title .items div {
パディング：0px;
マージン左：10px;
幅：96px;
高さ：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）、JSコードは次のとおりです。
コードコピーは次のとおりです。
$（function（）{
bigbear.ui.createtab（$（ "＃tab"）、{
Buttontext：「モジュールを追加」、
結果： [
{
テキスト：「ウィザードプロンプト」、
URL：「help.html」、
showclose： "0"、
ステータス：「1」
}、
{
テキスト：「学生情報」、
URL：「info.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「学生分類」、
URL：「category.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「Big Bear {{Bb}}」、
URL：「bb.html」、
showclose： "1"、
ステータス：「1」
}、
{
テキスト：「ベータテストモジュール」、
URL：「test.html」、
showclose： "1"、
ステータス：「1」
}
]
}）;
}）;
（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;
tabproto._deleteitem = function（item）{
var that = this;
this.getElem（）。find（ "。title.items div"）
.eq（item ["index"]）
.fadeout（function（）{
that._resetcontent（）;
that._updatestatus（item）;
that._triggeritem（item ["index"] + 1）;
that.getElem（）。find（ "。title.adder"）。トリガー（ "click"）;
}）;
};
tabproto._triggeritem = function（next）{
var nextStatus = this._getStatus（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._getStatus = function（index）{
var status = "";
$ .each（this.getopts（）["result"]、function（i、item）{
if（index == item ["index"]）{
ステータス += item ["status"];
falseを返します。
}
}）;
戻りステータス。
};
tabproto._updatestatus = function（item）{
var status = item ["status"];
item ["status"] =（ "1" == status）？ "0"： "1";
};
tabproto.init = function（）{
var that = this;
this.getElem（）。find（ "。title.adder"）
.text（ " +" + this.getopts（）["buttontext"]）
.on（ "click"、function（）{
that._toggleconsolepanel（function（）{
var root = that.getElem（）。find（ "。コンソールパネル"）。empt（）;
$ .each（that.getopts（）["result"]、function（i、item）{
if（ "0" == item ["status"]）{
var elem = $（ "<div style = 'float：left';> </div>"）
.data（ "item"、item）
.appendto（root）;
$（ "<input type = 'radio' name = 'addMod' />").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"）。parent（）。data（ "item"）;
that._updatestatus（data）;
that.getElem（）。find（ "。title.items div"）。eq（data ["index"]）。fadein（）。trigger（ "click"）;
that.getElem（）。find（ "。title.adder"）。トリガー（ "click"）;
}）
.appendto（root）;
}
それ以外{
root.text（ "まだ追加するアイテムはありません！"）;
}
}）;
}）;
$ .each（this.getopts（）["result"]、function（i、item）{
item ["index"] = i;
that._render（item）;
}）;
this.getElem（）。find（ "。title.items div"）
.eq（0）
.trigger（ "click"）; //それがなければならないと仮定します。そうしないと、プラグインはあまり意味がありません！
};
tabproto._toggleconsolepanel = function（callback）{
this.getElem（）。find（ "。コンソールパネル"）。slidetoggle（function（）{
$ .ISFUNCTION（callback）&& callback（）;
}）;
};
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._render = function（data）{
var that = this;
var item = $（ "<div> </div>"）
.text（data ["text"]）
.on（ "click"、function（）{
that._setCurrent（data ["index"]）;
that._getContent（data ["url"]）。done（function（result）{
that._setContent（result）;
}）
.fail（function（）{
新しいエラー（ "Net Error！"）;
}）;
}）
.appendto（this.getElem（）。find（ "。title.items"）））;
if（ "1" == data ["showclose"]）{
$（ "<span class = 'del'> x </span>"）
.on（ "click"、function（）{
if（win.confirm（ "このアイテムは削除されますか？"））{
that._deleteitem（data）;
falseを返します。 //バブルを停止します
}
}）
.appendto（item）;
}
};
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を返します。
};
ui.createTab = function（elem、opts）{
var tab = new Tab（Elem、Opts）;
tab.init（）;
[戻り]タブ。
};
}）（jQuery）;
（iv）、最終要約
（1）オブジェクト指向の考え方における機能要件の合理的な分析。
（2）、クラスの方法でプラグインロジックを整理します。
（3）上記の例を継続的に再構築します。それを合理的に再構築する方法は？過度に設計しないでください、安心してください。推奨される方法は、プロセス設計とオブジェクト指向の思考デザインを組み合わせることです。
（4）タブ内のオプションを、上記の例で個別のクラスに独立して分類できるかどうかを考えてください。たとえば、「アイテム」、「タブ」クラスを変更する方法は？質問で考えてください。 。 。
上記は、この記事のコンテンツ全体です。将来、このプラグインを改善し続けます。この記事が気に入ったら、親指をあげてください。