數(shù)據(jù)載入后，最終都會(huì)以某種形式顯示在頁(yè)面上。簡(jiǎn)單情況，我們可能會(huì)這樣做：

$('body').append('<div>' + data.name + '</div>'); 

如果頁(yè)面邏輯一旦復(fù)雜，比如需要有if判斷或者多層循環(huán)時(shí)，這種連接字符串的方式就相形見(jiàn)絀了，而這也就催生出了JS模板引擎。

主流的JS模板引擎有underscore.js，Jade，EJS等等，可以橫向?qū)Ρ纫幌逻@些JS模板引擎的優(yōu)缺點(diǎn)。

對(duì)于相對(duì)簡(jiǎn)單的頁(yè)面邏輯（只需要支持if和for/each）來(lái)說(shuō)，我更傾向選用輕巧的underscore.js或者JavaScript Templates。

在當(dāng)前例子中，使用underscore.js生成列表就非常簡(jiǎn)單了，頁(yè)面模板為：

<ul data-role="listview" data-inset="true"> 
<script id="tmpl-restaurants" type="text/template"> 
    <% _.each(data, function(restaurant) { %> 
        <li> 
            <a href="#" data-rel="back" data-value="<%- restaurant.name%>"><%- restaurant.name%></a> 
        </li> 
    <% }); %> 
</script> 
</ul> 

調(diào)用引擎：

$("#tmpl-restaurants").replaceWith( 
    _.template($("#tmpl-restaurants").html(), { 
        data : restaurants 
    }) 
); 

面向?qū)ο笈c模塊化

通過(guò)上面這些工具的組合，我們有了模塊的概念，有了模板引擎，有數(shù)據(jù)的加載。最終還是要通過(guò)javascript將這一切組織在一起并加入應(yīng)用所需要的邏輯。為了能***限度的復(fù)用代碼，用面向?qū)ο蟮姆绞饺ソM織內(nèi)容是比較好的選擇。

JavaScript雖然原生并不支持面向?qū)ο螅且廊豢梢酝ㄟ^(guò)很多方式模擬出面向?qū)ο蟮奶匦?。例子中采用了我個(gè)人比較喜歡的一種方式是：

var foodOrder = function(ui, options){ 
    //構(gòu)造函數(shù) 
    this.init(ui, options); 
} 
foodOrder.prototype = { 
   defaultUI :  { 
       form : '#form-order' 
   } 
   , defaultOptions : { 
       debug : false 
   } 
   , init : function(ui, options){ 
       this.ui = $.extend({}, this.defaultUI, ui); 
       this.options = $.extend({}, this.defaultOptions, options); 
   } 
} 
var order = new foodOrder({ 
    form : '#real-form' 
}, { 
    debug : true 
}); 

將頁(yè)面的UI元素以及配置項(xiàng)目抽象出來(lái)，在實(shí)際構(gòu)造對(duì)象時(shí)則可以通過(guò)入口參數(shù)復(fù)寫(xiě)，可以分離整個(gè)項(xiàng)目的邏輯與UI，使處理的方式更加靈活。

Web App***實(shí)踐示例代碼

依據(jù)此Web App開(kāi)發(fā)***實(shí)踐所開(kāi)發(fā)的App，基于HTML5 Boilerplate、requireJS、jQuery Mobile、Underscore.js，后端邏輯用jStorage模擬實(shí)現(xiàn)。完成后的成品在此。所有代碼可以在github查看。希望大家也能夠按照本系列教程開(kāi)發(fā)出好用的Web App。