JavaScriptMVC框架backbone.js初探

什么是backbone

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、虚拟空间、营销软件、网站建设、淇滨网站维护、网站推广。

backbone不是脊椎骨，而是帮助开发重量级的javascript应用的框架。

主要提供了3个东西：1、models(模型) 2、collections(集合) 3、views(视图)

backbone.js文件本身很小，压缩后只有5.3KB，作为一个框架级别的核心JS文件，这个数字很可怕。

除此之外，这个JS还必须依赖于另一个JS文件：underscore.js(包含许多工具方法，集合操作，js模板等等)。

简介

用Backbone.Model表示应用中所有数据，models中的数据可以创建、校验、销毁和保存到服务端。

当models中值被改变时自动触发一个"change"事件、所有用于展示models数据的views都会侦听到这个事件，然后进行重新渲染。

Backbone.Collection和我们平时接触的JAVA集合类相似，具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存models的集合类。

Backbone.View中可以绑定dom el和客户端事件。页面中的html就是通过views的render方法渲染出来的，当新建一个view的时候通过要传进一个model作为数据，例如：

Js代码：

 
 
 
    
  
  
  
  1. var view = new EmployeeView({model:employee});   
    2.

也就是说model就是以这种方式和view进行关联的。

特点

创建models或者views的语法：extends，相当于类继承

models的创建，销毁，校验等一系列改变都会触发相应的事件

示例

需求：用backbone.js和jquery实现一个可编辑的员工信息表格。

功能：1、录入员工信息。2、删除员工信息。3、双击表格可对员工信息进行修改。4、能对员工信息进行有效性校验。5、能对员工信息进行持久化。

设计：

用Employee类(继承自Backbone.Model)表示员工信息，包含ID、姓名、性别、年龄和职位字段。

Js代码：

 
 
 
    
  
  
  
  1. window.Employee = Backbone.Model.extend({  
    2. 
  
  
  
  2.     // 模型值校验  
    3. 
  
  
  
  3.     validate:function(attrs){  
    4. 
  
  
  
  4.         for(var key in attrs){  
    5. 
  
  
  
  5.             if(attrs[key] == ''){  
    6. 
  
  
  
  6.                 return key + "不能为空";  
    7. 
  
  
  
  7.             }  
    8. 
  
  
  
  8.             if(key == 'age' && isNaN(attrs.age)){  
    9. 
  
  
  
  9.                 return "年龄必须是数字";  
    10. 
  
  
  
  10.             }  
    11. 
  
  
  
  11.         }  
    12. 
  
  
  
  12.     }  
    13. 
  
  
  
  13. }); 
    14.

声明Employee类之后就可以新增一个Employee的示例对象了：

Js代码：

 
 
 
    
  
  
  
  1. var employee = new Employee();   
    2.

Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候，只需要调用

Js代码：

 
 
 
    
  
  
  
  1. employee.set({'id':1,'name':'Jason'});   
    2.

当然，如果需要对employee的信息进行校验，需要给Employee类配置一个validate方法，这个方法的参数attrs就是set进去的json数据。这样，当employee里面的数据每次发生改变的时候都会先调用这个validate方法。

Model类定义好之后就可以开始定义集合类了，在集合类里面可以对里面的每个Model进行增加，删除等一系列操作，还可以调用fetch方法从server端获取集合的初始值。

Js代码：

 
 
 
    
  
  
  
  1. window.EmployeeList = Backbone.Collection.extend({  
    2. 
  
  
  
  2.     model : Employee,  
    3. 
  
  
  
  3.     // 持久化到本地数据库  
    4. 
  
  
  
  4.     localStorage: new Store("employees"),  
    5. 
  
  
  
  5.       
    6. 
  
  
  
  6. });  
    7. 
  
  
  
  7. window.Employees = new EmployeeList(); 
    8.

设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面，每当调用Employees.fetch()后又会从localStorage里面恢复数据。

View类主要负责一切和界面相关的工作，比如绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：

Js代码：

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

这个类里面的代码比较多，但主要和界面的渲染有关。一个EmployeeView对象对应table里面的一个tr元素。每次new一个EmployeeView对象的时候都会先调用initialize方法，这个方法里面绑定的事件确保了tr元素对应的model值每次发生改变或者被删除时都会同步到界面。也就是说当每次操作界面对数据进行修改后都是先把当前的变更保存到view绑定的model对象里面，然后model里面的事件机制会自动触发一个"change"事件对界面进行修改。

template中使用的方法_.template($('#item-template').html())是前面提到的underscore.js中提供一个工具方法，可以通过界面的HTML模板和一个JSON生成动态的HTML，说白了就是把JSON里面的值填充到HTML模板中对应的占位符里面去，牛X的是HTML模板里面支持一些常用的逻辑表达式如if,else,foreach等：

Html代码：

 
 
 
    
  
  
  
  1.    
    2. 
  
  
  
  2. <%= eid %> 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.     <%= username %>
 
  •     
    •  
  •  
  •  
  •     <%= sex=="1" ? "女":"男" %>
    •  
  •      
  •      
  •         男女 
  •      
  •      
  •  
  •  
  •     <%= age %> 
  •      
  •          
  •      
  •  
  •  
  •     <%= position %> 
  •      
  •          
  •      
  •  
  •  
  •     删除 
  •  
  •      

    • setText方法主要负责把model里面的数据设置到每个tr里面的隐藏输入域里面。

    close方法被绑定到了input和select元素的blur事件中。当用户对单元格数据进行修改后都会把鼠标点击到界面其他地方然后输入框会自动隐藏并且把修改的数据显示在表格上面。close方法首先从当前被编辑的元素中拿到最新值，然后封装成一个对象，调用model的save方法后首先执行model的validate方法，如果校验通过则保存到本地存储并触发"change"事件。

    最后还需要一个主界面View，这个View主要绑定了界面中的录入表单的“增加”按钮事件，Employees的相关事件以及页面初始化时从本地存储中恢复数据：

    Js代码：

     
 
 
      
  
  
  
    1. window.AppView = Backbone.View.extend({  
      2. 
  
  
  
    2.         el : $("#app"),  
      3. 
  
  
  
    3.         events : {  
      4. 
  
  
  
    4.             "click .#add-btn" : "createOnEnter" 
      5. 
  
  
  
    5.         },  
      6. 
  
  
  
    6.         // 绑定collection的相关事件  
      7. 
  
  
  
    7.         initialize: function() {  
      8. 
  
  
  
    8.             Employees.bind('add', this.addOne, this);  
      9. 
  
  
  
    9.             // 调用fetch的时候触发reset  
      10. 
  
  
  
    10.             Employees.bind('reset', this.addAll, this);  
      11. 
  
  
  
    11.             Employees.fetch();  
      12. 
  
  
  
    12.         },  
      13. 
  
  
  
    13.         createOnEnter : function(e) {  
      14. 
  
  
  
    14.             var employee = new Employee();  
      15. 
  
  
  
    15.             var attr = {};  
      16. 
  
  
  
    16.             $('#emp-form input,#emp-form select').each(function(){  
      17. 
  
  
  
    17.                 var input = $(this);  
      18. 
  
  
  
    18.                 attr[input.attr('name')] = input.val();  
      19. 
  
  
  
    19.             });  
      20. 
  
  
  
    20.             employee.bind('error',function(model,error){  
      21. 
  
  
  
    21.                 alert(error);  
      22. 
  
  
  
    22.             });  
      23. 
  
  
  
    23.             // set方法中会自动调用model的validate方法进行校验，如果不通过则返回false  
      24. 
  
  
  
    24.             if(employee.set(attr)){  
      25. 
  
  
  
    25.                 Employees.create(employee);  
      26. 
  
  
  
    26.             }  
      27. 
  
  
  
    27.         },  
      28. 
  
  
  
    28.         addOne : function(employee){  
      29. 
  
  
  
    29.             employee.set({"eid":employee.get("eid")||Employees.length});  
      30. 
  
  
  
    30.             employee.bind('error',function(model,error){  
      31. 
  
  
  
    31.                 alert(error);  
      32. 
  
  
  
    32.             });  
      33. 
  
  
  
    33.             var view = new EmployeeView({model:employee});  
      34. 
  
  
  
    34.             $(".emp-table tbody").append(view.render().el);  
      35. 
  
  
  
    35.         },  
      36. 
  
  
  
    36.         addAll : function(){  
      37. 
  
  
  
    37.             Employees.each(this.addOne);  
      38. 
  
  
  
    38.         }  
      39. 
  
  
  
    39.     }); 
      40.

    initialize方法中绑定了Employees的add和reset事件，也就是说每当往Employees中添加一个model的时候都会调用AppView的addOne方法，这个方法主要绑定了model的error事件以及把EmployeeView生成的html插入到界面中的合适位置。

    OK，万事俱备，只欠启动，整个应用的初始化方法就是AppView的initialize方法，因此只需要新建一个AppView就可以了：

    Js代码

     
 
 
      
  
  
  
    1. window.App = new AppView();   
      2.

    整个示例的JS代码很少，加上注释只有100行左右，感兴趣的可以下载看看。由于示例使用到了本地存储，所以不要用IE运行示例，你懂的。

    原文：http://www.operamasks.org/blog/?p=211

    【编辑推荐】

    1. JavaScript:根本没有“JSON对象”这回事！
    2. 你了解JavaScript中的function吗?
    3. 8个最新的JavaScript脚本资源强烈推荐
    4. Google发布JavaScript->Dart翻译标准
    5. JavaScript面向对象编程

    网站名称：JavaScriptMVC框架backbone.js初探
    标题来源：http://www.shufengxianlan.com/qtweb/news13/213913.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    定制网站知识

    行业网站建设

    成都网站制作　　 　四川德阳主机托管　　 　帝美豪门窗　　 　成都机柜租用　　 　搜索引擎优化　　 　成都展柜制作　　 　成都棕数机房　　 　宣威网站建设　　 　成都雨棚定制　　 　成都联通服务器托管　　 　高端网站建设　　 　成都高电机柜租用　　 　南充电信机房托管　　 　重庆服务器托管　　 　重庆网站建设　　 　吉安网站建设　　 　产品包装设计　　 　上海除甲醛　　 　成都响应式网站建设　　 　营销型网站建设