這個系列介紹了一個例子安券，有兩個view組件墩崩，一個是Droplist，一個是Table侯勉。
基本的數(shù)據(jù)格式如下所示鹦筹，其中Droplist列出name，選中指定name后址貌，在Table列出conditions數(shù)組的內(nèi)容铐拐。
{ "_id" : ObjectId("5ca3f9abd40869ed2f6bb26b"), "conditions" : [ "111", "222" ], "name" : "aaa" }
{ "_id" : ObjectId("5ca3f9abd40869ed2f6bb26c"), "conditions" : [ "333", "444" ], "name" : "bbb" }
之前幾天對Droplist組件、Table組件练对，以及兩個組件間的通訊進行了說明遍蟋，今天是這個系列的最后一篇，重點介紹一下總體架構(gòu)螟凭。
首先這個例子包括了一個HTML模版文件和三個JS文件匿值，它們分別是
- template.html，包括基本的組件及id赂摆，完全不含js代碼
- ctrl.js，主控代碼钟些，引入并創(chuàng)建組件
- trainsets.js烟号，Droplist組件代碼
- taglist.js，Table組件代碼
先看HTML模版文件
<div data-type="awf-container">
<select id='trainsets' data-type='awf-droplist' data-title="測試集"
data-title-width="col-lg-1" data-width="col-lg-3" >
</select>
<button class="addTrainset" data-type="awf-button">新增集合</button>
<button class="removeTrainset" data-type="awf-button">刪除集合</button>
</div>
<table id="taglist" data-type="awf-table" data-title='Cases' data-extBtn="addNew">
<thead>
<tr>
<th>分類標簽</th>
<th>案例數(shù)量</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
在這里定義了頁面中出現(xiàn)的幾個主要組件：Droplist政恍、兩個按鈕和一個Table汪拥。
主控代碼ctrl.js
define(['text!./tpl.html', './trainsets', './taglist'],
function (tpl, Trainsets, Taglist) {
var controller = function () {
$navView.trigger("routeChange", "n303");
$appView.html(tpl).trigger("htmlChanged");
var trainsets = new Trainsets();
var taglist = new Taglist();
trainsets.load();
controller.onRouteChange = function () {
trainsets.undelegateEvents();
taglist.undelegateEvents();
};
};
return controller;
});
引入了另外三個文件，并創(chuàng)建了Trainsets組件和Taglist組件篙耗，調(diào)用load函數(shù)進行初始化迫筑。
這樣整個頁面的模塊化劃分就比較清晰了，在這里模塊化的作用并不一定是要進行復用宗弯，而是便于維護脯燃，通過把不同功能劃分成不同模塊，模塊之間使用松耦合的消息隊列方式進行通信蒙保，實現(xiàn)了故障隔離和代碼的精簡辕棚，更便于查找錯誤和增加新功能。
