你的位置:首页 > Java教程

[Java教程]BackBone.js入门教程


废话不说,直入正题。

Backbone.js是什么

Backbone.js提供了一套web开发框架,通过Models进行key-value绑定及自定义事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及现有的Application通过RESTful JSON接口进行交互,它是基于jQuery和underscore的一个前端js框架。

Backbone中的重要概念

  • Model:根据现实数据建立的抽象,比如people

  • Collection:比如一群人

  • View:对Model和Collection中的数据进行展示,把数据渲染到页面上

  • Router:控制页面的路由

通过Backbone,你可以把你的数据当作Model,通过Model你可以创建数据,进行数据验证,销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时,model会触发change的事件。那些用来显示model状态的views会接受到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的Backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为在model发生变化时,views会很简单的进行自我更新。

感受一下

先上个例子感受一下:简易考勤打卡系统。
下面上代码:

<!DOCTYPE html><html><head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body> <button id="check">请点击此处打卡</button> <ul id="person-list"></ul></body><script> (function($){//    新建Model构造函数   var People=Backbone.Model.extend({    name:null,//姓名    ctime:null//打卡时间   });//   新建Collection构造函数   var Peoples=Backbone.Collection.extend({    initialize:function(models,options){     this.bind("add",options.view.addOnePerson);//add将Model添加进Collection,在这里调用View中定义的addOnePerson函数    }   });//   新建View构造函数   AppView=Backbone.View.extend({    el:$("body"),    initialize:function(){     this.peoples=new Peoples(null,{view:this})//实例化一个Collection    },    events:{     "click #check":"checkIn",//绑定#check的click事件,并执行checkIn函数    },    checkIn:function(){     var person_name=prompt("您的姓名是?");     if(person_name==""){      person_name="路人甲";     }     var ctime=new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();     var person=new People({name:person_name,ctime:ctime});     this.peoples.add(person);    },    addOnePerson:function(model){     $("#person-list").append("<li>"+model.get('name')+"您好,您的打卡时间为:"+model.get('ctime')+"</li>");    }  });  var appview=new AppView;//实例化一个View,自动执行initialize中的函数 })(jQuery)</script></html>

动手实践

本节从Model、Collection、View和Router四个部分分别讲解。

Model

对于Model这一部分,其官网是这么说的:“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换、验证、属性计算和访问控制”。这句话基本上高度概括了Model在一个项目中的作用。实际上,不仅仅是js应用,在任何以数据收集和处理的项目中Model都是很重要的一块内容。

在web端,Model还有一个重要的功能就是和服务器端进行数据交互,就像是服务器端的程序需要和数据库交互一样。因此Model应该是携带数据流窜于各个模块之间的东西。

所以说,Ajax操作,应该写在Model层。

(function() { var Man = Backbone.Model.extend({  defaults: {   name: "张三",   age: "38"  },  initialize: function() {   //初始化时绑定监听,change事件会先于validate发生   this.bind("change:name", function() {    var name = this.get("name");    alert("你改变了name的属性为:" + name);   });   this.bind("invalid", function(model, error) {    alert(error);   });  },  validate: function(attributes) {   if (attributes.name === '') {    return "name不能为空!";   }  },  aboutMe: function() {   return "我叫" + this.get("name") + ",今年" + this.get("age") + "岁";  } }); var man = new Man(); alert(man.aboutMe()); man.set({  name: '' }); man.save();//验证})();

model和服务器端的交互,调用save方法会post对象的所有属性到server端,调用fetch时又会发送get请求到server端,接受数据和发送数据的格式均为json格式。

下一期更新Collection。