构建基础的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 });

 

  

 

本文链接:构建基础的JavaScript MVC——视图和模板(二),转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量