构建基础的javaScript MVC——视图和模板（二）

一、动态视图

　　1、现在渲染视图的方式基本上有2种 　　（1）服务端生成好html； 　　（2）客户端渲染模板，服务端提供JSON数据接口。　　2、客户端渲染视图也有2种方式： 　　（1）使用document.createElement创建Dom元素，然后追加到页面； 　　（2）预先定义HTML静态视图，在必要的时候显示和隐藏HTML片段；

二、模板　　

　　1、现在，有很多模板可以选择，比如Mustache、Underscore简单模板、Handlebars、EJS等等。模板引擎简单实用的方法，当然可以自己显示一个小的模板引擎。模板语法也很简单，例如： 　　{{if}} 　　　　${url} 　　{{/if}}　　或者　　<%if%>　　　　<%=name%>　　<%endif%>　　如果将后端的业务逻辑代码和视图渲染放到前端来做，建议使用模板引擎来做，尽管会浪费HTML片段，例如　　<script type="text/my-tpl">　　　　姓名是：<%=name%>　　</script>　　这段html代码片段是不会进行渲染的，只用当模板引擎得到数据和渲染模板时才会展现UI。这样做的好处是可以将视图和逻辑的分离，可以保证MVC的合理性以及提高代码的维护性。　　2、模板放在哪里　　（1）在js代码中存在；　　（2）定义在script标签内，如上例所示；　　（3）通过Ajax拉取；　　（4）HTML行内存储　　第（2）种方案还是有一定的优势，可以保证MVC分离的同时不必像（3）一样远程拉取，消耗了链接；当然HTML行内存储不仅可以直接渲染UI,还可以保证源代码清晰；当然使用(2)方案更加灵活，程序更加容易维护和控制。

三、视图和模型间的绑定

 1　　  用过AngularJS的双向数据绑定一定很爽，简直就是酸爽。当JS对象改变时能够引起视图的刷新，而不必手动去管 2     理视图的刷新渲染。这里的做法是将模型的更新立即通知视图进行渲染。 3     例如： 4     var User = function(){ 5         this.name = name; 6     }; 7     //定义绑定 8     User.bind = function(event, callback){ 9         var calls = this._callbacks || (this._callbacks = {});10         (this._callbacks[event] || (this._callbacks[event] = [])).push(callback);11     };12     //事件触发13     User.trigger = function(event){14         if(!this._callbacks) return this;15         if(!this._callbacks[evnet]) return this;16         var list = this._callbacks[evnet];17         $.each(list, function(){18             this();19         });20     };21     22     User.create = function(name){23         this.records.push(new this(name));24         this.trigger('change');25     };26     27     //绑定change事件28     $(function($){29         User.bind('change', function(){30             var tpl = '<li>test</li>';31             $('#list').empty();32             $('#list).append(tpl);33         });34     });