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

你可能感兴趣的:(框架,mvc,backbone)