初识轻量级前端开发框架backbone

这款前端开发javascript框架在业内已经是大名鼎鼎了，但是楼主还没有接触过，看风评这年头不懂backbone怎敢出去装

这几天的工作还算是不紧张，速度充电

基于underscore、非强制性依赖jquery/zepto的前端Javascript框架

backbone.js是一款web前端开发的javascript轻量级MVC框架；依托此框架，我们可以像高级语言一样定义类、类属性及方法，更好的组织代码并按框架提供的数据逻辑分离方法减少代码混乱

本文需要的文件

需要下载这3个js文件：zepto（jquery的替代品，你可以把它理解为jquery的mini版）、underscore、backbone

<script src="js/zepto.min.js"></script><script src="js/underscore.min.js"></script><script src="js/backbone.min.js"></script>

backbone的4大模块

模型：Backbone.Model，一个数据模型

集合：Backbone.Collection，数据模型的一个集合

视图：Backbone.View，数据处理，注意它并非我们传统认知中的页面模版

路由：Backbone.Router，路由配置

模型

这是一个标准的对象模型（数据假定为网站最常见的用户），initialize为初始化方法，默认执行定义的函数或监听必要的事件；defaults为初始化参数，定义的参数将作为对象模型的默认参数

var User = Backbone.Model.extend({    initialize : function(){    },    defaults : {        name : '大白兔'        lang : '汉语'    }});

实例化对象模型User，并获得对象属性attributes，输出的数据结构为：Object {name: "大白兔", lang: "汉语"}

var user = new User;console.log(user.attributes);

调用set方法设置对象模型指定属性、get方法可以获得对象模型指定属性值

var user = new User;user.set({name : '小白兔'});console.log(user.get('name'));

初始化方法initialize中监听属性变化事件change并在回调中自定义属性变化的信息提示

var User = Backbone.Model.extend({    initialize : function(){        this.bind('change:name', function(){            console.log(this.attributes);        });    },    defaults : {        name : '大白兔',        lang : '汉语'    },});var user = new User;user.set({name : ''});

调用save方法提交对象模型数据、设置数据提交地址url

var User = Backbone.Model.extend({    url : '/'});var user = new User;user.save();

既然准备提交对象模型数据了，数据验证方法validate中自定义数据校检方法、初始化方法initialize中监听提交失败事件error并在回调中自定义返回错误的信息提示；一个关于模型的完整demo

var User = Backbone.Model.extend({    url : '/',    initialize : function(){        this.bind('change:name', function(){            console.log(this.attributes);        });        this.bind('error', function(){            console.log('数据提交失败');        });    },    defaults : {        name : '大白兔',        lang : '汉语'    },    validate : function(obj){        if(obj.name.length < 2) console.log('昵称过短');    }});var user = new User;user.set({name : ''});user.save();

集合

现在我们要把实例化对象模型的数据存放在实例化对象集合中，就需用到集合了，这里有点绕，楼主在这里绕了很久；可以理解为通过改变集合Users的属性model的值为模型User，从而指定了与集合Users相关联的模型，这里的模型是User

var User = Backbone.Model.extend({    initialize : function(){    },    defaults : {        name : '',        lang : ''    }});var Users = Backbone.Collection.extend({    model : User});

实例化对象集合，并为对象集合添加add一组需按模型模式实例化的指定数据，然后打印对象集合内所有模型数据

var users = new Users;var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];for(var i = 0; i < arr.length; i ++){    var user = new User({        name : arr[i][0],        lang : arr[i][1]    });    users.add(user);};users.each(function(obj){    console.log(obj.attributes);});

初始化方法initialize中监听数据添加事件add并在回调中自定义数据添加后的信息提示

var Users = Backbone.Collection.extend({    initialize : function(){        this.bind('add', function(obj){            console.log('add', obj.attributes);        });    },    model : User});

既然是数据，就有添删改；有了添加事件，对应的对象数据删除事件remove、对象数据改变事件change；一个关于集合的完整demo

var User = Backbone.Model.extend({    initialize : function(){    },    defaults : {        name : '',        lang : ''    }});var Users = Backbone.Collection.extend({    initialize : function(){        this.bind('add', function(obj){            console.log('add', obj.attributes);        });        this.bind('remove', function(obj){            console.log('remove', obj.attributes);        });        this.bind('change', function(obj){            console.log('change', obj.attributes);        });    },    model : User});var users = new Users;var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];for(var i = 0; i < arr.length; i ++){    var user = new User({        name : arr[i][0],        lang : arr[i][1]    });    users.add(user);};user.set({    name : '卡恩',    lang : '德语'});users.remove(user);

视图

本想把视图也一起写完，但是发现视图必须有相对应模型，于是视图模型的合作才是重点，虽然楼主也做好了例子但还不甚了了，待成熟后再专门说免得误人误己，只留一个demo

underscore为我们提供了模板引擎，书写格式如下所示，类似于jquery tmpl

<ul class="user"></ul><script id="user_tmpl" type="text/template"><li><p><%=name %></p><div><%=lang %></div></li></script>

然后是javascript部分，这部分还没思索透具体理解暂不写

var User = Backbone.Model.extend({    defaults : {        name : '',        lang : ''    }});var Users = Backbone.Collection.extend({    model : User});var users = new Users;var Userv = Backbone.View.extend({    initialize : function(){        _.bindAll(this, 'render');        users.bind('add', this.render);    },    el : '.user',    template : _.template($('#user_tmpl').html()),    render : function(){        $(this.el).append(this.template(this.model.toJSON()));        return this;    }});var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];for(var i = 0; i < arr.length; i ++){    var user = new User({        name : arr[i][0],        lang : arr[i][1]    });    users.add(user);    new Userv({        model : user    });};

同php交互方式

$data = json_decode(file_get_contents('php://input'));die(json_encode($data));

网上的文档其实很多，但是每个人的理解方式能力各不相同，不同的人可能需要不同的文章才能理解下去，楼主于是把自己的理解方式留下来