這個系列介紹了一個例子，有兩個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組件，以及兩個組件間的通訊進(jìn)行了說明，今天是這個系列的最后一篇，重點(diǎn)介紹一下總體架構(gòu)。

首先這個例子包括了一個HTML模版文件和三個JS文件，它們分別是

1. template.html，包括基本的組件及id，完全不含js代碼
2. ctrl.js，主控代碼，引入并創(chuàng)建組件
3. trainsets.js，Droplist組件代碼
4. 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>
&nbsp;&nbsp;<button class="addTrainset" data-type="awf-button">新增集合</button>
&nbsp;&nbsp;<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>分類標(biāo)簽</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ù)進(jìn)行初始化。

這樣整個頁面的模塊化劃分就比較清晰了，在這里模塊化的作用并不一定是要進(jìn)行復(fù)用，而是便于維護(hù)，通過把不同功能劃分成不同模塊，模塊之間使用松耦合的消息隊(duì)列方式進(jìn)行通信，實(shí)現(xiàn)了故障隔離和代碼的精簡，更便于查找錯誤和增加新功能。

系列回顧鏈接
Backbone系列之一
Backbone系列之二
Backbone系列之三
Backbone系列之四