标签：
一、动态视图
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 });
标签：
原文地址：http://www.cnblogs.com/vczero/p/mvc_2.html
