初步认识Backbone.js

作为一个轻量级MVC框架，如果是与后端交互比较频繁的站点使用这个框架，其效果是很显著的。从我个人角度而言，这个框架适合微博这类的实时性比较强并且牵扯用户信息比较多的网站，据说豆瓣的阿尔法城也是用这个框架做的。

如果从它的原理出发，我觉得是模仿或抄袭了ActionScript的PureMVC框架，但又有自己的特点，因为它融合了HTML　ＤＯＭ的特征，这点从它视图的events中可以看出。框架应该是从event配置中，寻找了事件后的选择器，然后把该事件绑了上去。参数传递无非就是apply或call，不出其右。

1. window.EmployeeView = Backbone.View.extend({  
2.         tagName : 'tr',  
3.         template : _.template($('#item-template').html()),  
4.         events : {  
5.             "dblclick td" : "edit",  
6.             "blur input,select" : "close",  
7.             "click .del" : "clear",  
8.         },  
9.         initialize : function(){  
10.             // 每次更新模型后重新渲染  
11.             this.model.bind('change', this.render, this);  
12.             // 每次删除模型之后自动移除UI  
13.             this.model.bind('destroy', this.remove, this);  
14.         },  
15.         setText : function(){  
16.             var model = this.model;  
17.             this.input = $(this.el).find('input,select');   
18.             this.input.each(function(){  
19.                 var input = $(this);  
20.                 input.val(model.get(input.attr("name")));  
21.             });  
22.         },  
23.         close: function(e) {  
24.             var input = $(e.currentTarget);  
25.             var obj = {};  
26.             obj[input.attr('name')] = input.val();  
27.             this.model.save(obj);  
28.             $(e.currentTarget).parent().parent().removeClass("editing");  
29.         },  
30.         edit : function(e){  
31.             // 给td加上editing样式  
32.             $(e.currentTarget).addClass('editing').find('input,select').focus();  
33.         },  
34.         render: function() {  
35.             $(this.el).html(this.template(this.model.toJSON()));  
36.             // 把每个单元格的值赋予隐藏的输入框  
37.             this.setText();  
38.             return this;  
39.         },  
40.         remove: function() {  
41.             $(this.el).remove();  
42.         },  
43.         clear: function() {  
44.           this.model.destroy();  
45.         }  
46.     }); 
    

最牛逼的当是它的模板工具，个人认为这个模板工具是这个框架最有价值的地方，对于占位符的处理相当不错，模板的建立就像写jsp页面模板差不多。

1.  <script type="text/template" id="item-template">  
2. <td><%= eid %></td>  
3. <td class="username">  
4.     <div class="display"><%= username %></div>  
5.     <div class="edit"><input class="username" name="username"></input></div>  
6. </td>  
7. <td class="sex">  
8.     <div class="display"><%= sex=="1" ? "女":"男" %></div>  
9.     <div class="edit">  
10.     <select name="sex" class="sex" style="width:45px">  
11.         <option value="0">男</option><option value="1">女</option>  
12.     </select>  
13.     </div>  
14. </td>  
15. <td class="age">  
16.     <div class="display"><%= age %></div>  
17.     <div class="edit">  
18.         <input class="age" name="age"></input>  
19.     </div>  
20. </td>  
21. <td class="position">  
22.     <div class="display"><%= position %></div>  
23.     <div class="edit">  
24.         <input class="position" name="position"></input>  
25.     </div>  
26. </td>  
27. <td>  
28.     <a href="#" class="del">删除</a>  
29. </td>  
30.     </script> 
    

它的缺点也很明显，因为页面更新全依赖于JSON，如果禁掉JS，或者这些JS与浏览器中的某些插件起冲突，其后果也是很明显的，对于银行等这类需要考虑JS禁掉情况的站点来说，是不合适的。另外对于不需要M或C的单个页面来说，用这个有时反倒多余，很多API用不上。因此这个得看情况使用，如果全部页面都使用这个框架，则不太合理。尤其是手机网站，在中国这个流量比较贵的国度，页面上不用的代码最好不要有。