構建基礎的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——視圖和模板（二）