Backbone 学习总结

时间：2021-05-08 08:21:47

1.Backbone描述

官网描述：（1）Provides client-side app structure

　　　　　（2）Models to repents data

　　　　　（3）View to hook up Models to the DOM

　　　　　（4）Synchonizes data to/from server

Backbone（也称为 Backbone.js）是一个轻量级库，可用于创建 MVC 类应用程序。模型、视图、集合和路由器是 Backbone 框架中的主要组件。在 Backbone 中，模型会存储通过 RESTful JSON 接口从服务器检索到的数据。模型与视图密切关联，负责为特定 UI 组件渲染 HTML 并处理元素上触发的事件，这也是视图本身的一部分。

  • 　　强制依赖于 Underscore.js，Underscore.js 是一个实用型库
  • 　　非强制依赖于 jQuery/Zepto
  • 　　根据模型的变更自动更新应用程序的 HTML，有助于代码维护
  • 　　促进客户端模板使用，避免了在 JavaScript 中嵌入 HTML 代码

模型、视图、集合各司其职，如下图所示：

Backbone 学习总结

2.Backbone 之 View

　　创建基类：

var TodoView = Backbone.View.extend({

    el/tagName: ‘<ul></ul>’,

    templete:_.templete(‘<h3><%=description%></h3>’),

    events:{

        “<event> <selector>” : <method>

    },  

    initialize : function() {

                this.model.bind("change", this.render, this);

        } ,

    render: function(){

        var attr = this.model.toJSON();

        this.$el.html(this.templete(attr));

    },

        <method>: function(){

            //todo

        }

});

// el / tagName 可以是任意合法的dom节点，默认是<div></div>

//_.templete是强依赖的underScore.js 的方法，但是在实际应用中我们会选择功能更强大的模板引擎 如 Handlebars.js 来处理模板文件（就是我们写的DOM html）

// events属性给模板文件绑定事件，非常方便

//initialize中将render方法直接绑定在模型的变更事件上，当模型发生更改时，会自动触发 render() 方法，从而节省数行代码。

//render方法中的 this.$el —>topElement（el/tagName）

　　创建实例：

var todoView = new TodoView({model: todoItem});

todoView.render();

todoView.$el.html(); //实际加入DOM

//可以在view上绑定和解绑定事件

todoView.on('event-name', method);

todoView.off('event-name', method);

//触发绑定的事件

todoView.trigger('event-name');

3.Backbone 之 Model

　　创建基类：

var TodoItem = Backbone.Model.extend({

    defaults:{key:value}，

    validate： function(){...} //用于验证模型，一般需要重写，在调用 set() 方法时触发

});

　　创建实例：

var todoItem = new TodoItem({JSON});

todoItem.url = ‘/todo’;

todoItem.fetch(); //触发默认url请求

todoItem.save(); //post URL

//save() 函数将在后台委托给 Backbone.sync，这是负责发出 RESTful 请求的组件，默认使用 jQuery 函数 $.ajax()。首先保存模型对象，使用一个 POST 请求，创建一个标识符 ID，其后，尝试发送对象到服务器，使用一个 PUT 请求。

todoItem.set(key,value);

todoItem.get(‘key’);

todoItem.destroy(); //删除URL

todoItem.toJSON(); //从Model获得JSON数据

todoItem.on(event,method); //绑定事件

todoItem.off(event,method);//解绑定事件

todoItem.trigger(‘event’);//触发绑定事件

event包括：

change，change:<attr>, sync, destroy,

error(model.save / model.validation failed), all(Any triggered)

4.Backbone 之 Collection

Collection 就是Model的集合，提供了很多处理Model的接口。一般的对应关系如下情况：

　　　　　　　　　　　　Model—View

　　　　　　　　　　　　Model—View

Collection — View —　  Model—View

　　　　　　　　　　　　Model—View

　　　　　　　　　　　　Model—View

　　基类和实例：

var TodoList = Backbone.Collection.extend({

    model : TodoItem,

    url: ‘/todo’,

    parse: function(data){

        //data contains the raw JSON object

        console.log(data);

    }

});

//在一些情况下，要操作来自服务器的原始数据，可以使用集合的 parse() 方法。

var todoList = new TodoList();

todoList 有一些属性： .length / .add(model) / .at(index) 返回model / .get(1) 返回model / .remove(model) / .fetch()  Get URL ’/todo’

//一些常用方法

//添加和移除监听事件

todoList.on(‘event-name’, method);

todoList.off(‘event-name’, method);

todoList.fetch();//调用集合默认URL属性，使用 Ajax GET 请求从服务器取出 JSON 数据

todoList.reset(); // 允许将多个模型设置到一个集合中

todoList.forEach(function(todoItem){});

todoList.map(function(todoItem){});

todoList.filter();

…

5.Bankbone 之 Router

　　基类和路由实例：

var Router = new Backbone.Router.extend({

    routes:{URL (“todo/:id”): Method(‘show’)},

    show: function(id){

        this.todoList.focusOnTodoItem(id);

    },

    initialize: function(options){

        this.todoList = options.todoList;

    },

    start: function(){

        Backbone.history.start();  //灵魂，开启backbone 路由工作机制

    }

});

var mainApp = new Router();

总结下：

　　Backbone在实际应用都是先建立基类，然后创建实例，写我们的业务。

　　MVC 模式可以为大型 JavaScript 应用程序提供所需的组织化代码。Backbone 是一个 JavaScript MVC 框架，它属于轻量级框架，且易于学习掌握。模型、视图、集合和路由器从不同的层面划分了应用程序，并负责处理几种特定事件。处理 Ajax 应用程序或者 SPI 应用程序时，Backbone 是比较好的解决方案。

6.AngularJs 和 Backbone的使用对比

Angular：

　　Angular的特色就是依赖注入，双向绑定（MVVM），加上ui-router路由机制和指令灵活定义很强大，并且还是一个很标准的MVC模式。Angular：有国定的模式，无需自己封装太多代码，创    建模型和控制器比较灵活。mvc=model+controller+view

　　view：一些含有angular指令的html页面。ng-controller, ng-bind, ng-html...

　　controller：绑定view的数据，处理业务逻辑和server进行交互，发送rest请求。

　　model：数据模型，这个是与后台数据定义保持一致。

Backbone：

　　Backbone 相对Angular，更轻量些。显示模板，创建数据绑定，连接组件，比较*。主要是CMV = Collection+Model+View。

　　Collections有随时可枚举函数的丰富API，监听Model事件。

　　Model一般来绑定键值数据和自定义事件，可以绑定模型验证。

　　View声明事件处理函数，书写主要的交互逻辑，Restful Json 链接Application，主要来处理DOM。(view和页面DOM是两个概念)

　　Templete模板引擎，使得页面定义更灵活。当然需要自己手动书写的代码就比较多些。

　　Controller是自己封装起来处理逻辑的部分，一般初始化view，model，路由的入口处理。

　　

总之可以根据自己的需求，*选择前端框架，前端底子好，可以用Backbone，一般的话Angular，因为Angular是一个比较完整标准的框架，后台人员更容易介入。

相关文章