你的位置:首页 > Java教程

[Java教程]构建基础的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   });