backbone学习笔记二（框架简介）

使用Backbone已经有一段时间了，但是真正接触到的还只是它的九牛一毛啊，在这里简单的介绍一下Backbone框架的总体结构，如有不当之处，恳请指正出来。

Backbone.js框架是一种MVC模式的经典结构，

    其中的M是Backbone.Model,也就是实体entity,目前系统中使用的Model比较简单，如下

var entityName = Backbone.Model.extends({

defaults:{

     name:’’

}

});

在defaults属性中定义实例的属性即可，model可以绑定事件，例如change事件，可以具体到change：name事件，一旦属性name改变，即可触发事件，此外需要继续深入可以查看官方API。

    接下来介绍V，V是Backbone.View，view中比较重要有三点，如下

var view= Backbone.Model.extends({

template:_.template(htmlTemplate),//加载页面模板，’_’指UnderScore这个库

initialize:function(){},//初始化函数

render:function(){}//渲染函数

});

template()是underscore的加载模板方法，具体参看系统module模块中的例子，initialize方法是初始化这个页面时调用的，页面加载前需要完成的一些工作可以在initialize方法中实现，最后就是render方法，这里目前渲染的主要方式是将template()加载的模板添加到$(this.el)，this.el指代当前view的el,是一个空的div标签，渲染完成后切换页面，具体如何切换参看本系统中Router类中的changePage方法。

最后来介绍一下C这个控制层，这个层主要是由Backbone.Router来实现，以上提到的Router类即是继承了这个类，来看一下Router类的基本结构：

var Router = Backbone.Router.extend({

routes:{

    ‘routerName’:’routerFun’//与下面的routerFun对应

},

routerFun:function(){

    

}

})

基本结构就是这么简单，至于如何进入这个路由呢，很简单，例如标签<a href=”#routerName”></a>点击该标签即可进入该路由，这是从页面中进入路由的方式，还有一种手动触发的方式，Backbone.history.navigator(“#routerName”,true);路由还可以传递参数，具体可以参看我们的Router类以及Backbone的API。那么是不是所有的控制都只能在Router中呢，比如在登录页面简简单单的点击一个登录按钮，难道也要到路由中处理，其实不必那么麻烦，可以在当前页面中监听按钮的点击事件即可，具体可以参看API中Backbone.View的events属性。

Backbone中涉及的内容还是比较丰富的，封装了不少有用的函数，若能够熟练使用API必定能省我们很多事，有兴趣的读者可以深入了解。

中文API:http://www.csser.com/tools/backbone/backbone.js.html