数据载入后，最终都会以某种形式显示在页面上。简单情况，我们可能会这样做：
$('body').append('<div>' + data.name + '</div>');
- 1.
如果页面逻辑一旦复杂，比如需要有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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
调用引擎：
$("#tmpl-restaurants").replaceWith(
_.template($("#tmpl-restaurants").html(), {
data : restaurants
})
);
- 1.
- 2.
- 3.
- 4.
- 5.
面向对象与模块化
通过上面这些工具的组合，我们有了模块的概念，有了模板引擎，有数据的加载。最终还是要通过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
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
将页面的UI元素以及配置项目抽象出来，在实际构造对象时则可以通过入口参数复写，可以分离整个项目的逻辑与UI，使处理的方式更加灵活。
Web App***实践示例代码
依据此Web App开发***实践所开发的App，基于HTML5 Boilerplate、requireJS、jQuery Mobile、Underscore.js，后端逻辑用jStorage模拟实现。完成后的成品在此。所有代码可以在github查看。希望大家也能够按照本系列教程开发出好用的Web App。
