使用JS模板引擎、面向对象以及示例代码

数据载入后，最终都会以某种形式显示在页面上。简单情况，我们可能会这样做：

 
 
$('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。