backbone使用心得

从实习工作到现在已经一年多,公司web前端的客户端主要框架是backbone+underscore+artTemplate+jquery libs。经历了从混合着服务端语法到前端完全分离的开发模式。在项目重构中主要负责购物流程和订单这一块,虽然也意识到backbone这种mvc的短板。但是作为经典的前端mvc框架,还是很有必要学习了解一下

backbone简介

经典的前端mvc框架( backbone官网 , 中文文档 ),主要给开发者提供了model,view,collection等结构,并提供丰富的事件机制及route功能

model

主要用于数据交互和业务逻辑处理,开发者一般是从backbone.model继承

var model = Backbone.Model.extend({
	defaults:{
		name:'curtis'
	},
	initialize:function(){

	}
})

这样就声明了一个从backbone.model继承的model变量,变量中的defaults是用于声明变量的一些默认属性,可以通过如下方法获取到默认属性

var model1 = new model();
model1.get('name');

下面会讲到model和view的结合使用

model的get和set方法

get:获取当前model某属性的值

set:设置当前model某个属性的值,可以单个属性,也可以为一个json对象,设置了属性值之后会触发change事件,可通过设置view来监听model某属性来驱动视图进行更新

initialize

view对象的构造函数,即实例化对象的时候调用

view

于2016.06.29继续写了

view是backbone的提供的视图结构,对于简单的单页应用来说(SPA)是最重要的部分;

因为简单的单页应用其实并不需要通过control层来实现model和view的,两者之间增加一个control层

反而使得框架接口变得复杂

events

events主要是绑定了当前模块试图的一些绑定事件,使用方法如下:

var view = Backbone.View.extend({

  events: {
    "click .testBtn":"bindBtn"
  },

  bindBtn:function(){
    //具体实现
  }

});

initialize

view对象的构造函数,即实例化对象的时候调用

el

backboneView的一个重要属性,el是当前模块对应的dom元素,

如果实例化对象的时候没有传入el属性。el会是一个空的div包裹着模版渲染出来的页面

使用如下:

var view = Backbone.View.extend({
});

new view({
    el:'body'
})

或

var viewObj = new view({});
$("body").html(viewObj.$el);

上面两个方法都是把view对象实例化后渲染的插入到body中去