數據載入后，最終都會以某種形式顯示在頁面上。簡單情況，我們可能會這樣做：

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

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

主流的JS模板引擎有underscore.js，Jade，EJS等等，可以橫向對比一下這些JS模板引擎的優缺點。

對于相對簡單的頁面邏輯（只需要支持if和for/each）來說，我更傾向選用輕巧的underscore.js或者JavaScript Templates。

在當前例子中，使用underscore.js生成列表就非常簡單了，頁面模板為：

<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> 

調用引擎：

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

面向對象與模塊化

通過上面這些工具的組合，我們有了模塊的概念，有了模板引擎，有數據的加載。最終還是要通過javascript將這一切組織在一起并加入應用所需要的邏輯。為了能***限度的復用代碼，用面向對象的方式去組織內容是比較好的選擇。

JavaScript雖然原生并不支持面向對象，但是依然可以通過很多方式模擬出面向對象的特性。例子中采用了我個人比較喜歡的一種方式是：

var foodOrder = function(ui, options){ 
    //構造函數 
    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 
}); 

將頁面的UI元素以及配置項目抽象出來，在實際構造對象時則可以通過入口參數復寫，可以分離整個項目的邏輯與UI，使處理的方式更加靈活。

Web App***實踐示例代碼

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