backbonejs

前言：

backbone由以下模块组成。

一。Event

监听事件，自定义事件。绑定到任何对象。

http://www.css88.com/doc/backbone/#Events

这个是下面模块核心。几乎所有都会有用到。

all事件，所有各自对象监听的事件，都会同时触发此事件。

如下代码：

trigger: function(name) {
if (!this._events) return this;
var args = slice.call(arguments, 1);
if (!eventsApi(this, 'trigger', name, args)) return this;
var events = this._events[name];
var allEvents = this._events.all;  //即触发所有事件都会 去尝试看下触发 all事件。
if (events) triggerEvents(events, args);
if (allEvents) triggerEvents(allEvents, arguments);
return this;
}

二，view

构造函数：1.确定好页面父元素el，2.取消和绑定事件，3.整理好配置参数。4.初始化函数。

1.通过监听模型变化（change），渲染dom节点。

2.监听模型数据变化（change），获取数据。

3.绑定事件。

4.el:$('body')

方法： $: 在el下 查找元素。

三，model

所有显示模型数据的 Views 会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。

model初始化也可以有个collection集合。

属性：

default:默认的数据。若基础数据没有值，或者undefined就会填充。

方法：

set: 手动触发

change：模型属性的变化会触发change事件。

save:保存数据到服务器，如下，可以设置成功和失败回调。

todo.save({'done': done},{success:function(){alert('chenggong')}})

destroy：方法，同save，删除数据到服务器。可以设置成功和失败回调。

this.model.destroy();

fetch：读取服务器数据

四，collection

1.构造函数：

var Collection = Backbone.Collection = function(models, options) {
options || (options = {});
if (options.model) this.model = options.model;
if (options.comparator !== void 0) this.comparator = options.comparator;
this._reset();
this.initialize.apply(this, arguments);
if (models) this.reset(models, _.extend({ silent: true }, options));  //也可以直接实例化模型数组。（在ajax成功可以有一次）
}

fetch方法：获取服务器数据，设置成功，失败的回调操作。

fetch: function(options) {
options = options ? _.clone(options) : {};
if (options.parse === void 0) options.parse = true;
var success = options.success;
var collection = this;
options.success = function(resp) {
var method = options.reset ? 'reset' : 'set';
collection[method](resp, options);   //成功会触发set,默认，reset也是set只是会触发 reset事件，并且清除以前的模型数据。
if (success) success(collection, resp, options);
collection.trigger('sync', collection, resp, options);
};
wrapError(this, options);
return this.sync('read', this, options);
},

1.set方法：判断新增的模型并且实例化数据模型（监听模型的all事件），则会触发模型的add事件,和对应的集合的add,remove，sort 事件。

模型的all事件：所有模型的事件都会触发这个all事件，然后all事件是关联着集合的对应的事件，即监听模型的事件既是集合对应的事件也会发生。所以一般监听collection集合的 add,all,remove事件都可以。如下代码：

//_addReference,即以模型的增，删，改动，去触发对应的集合的add,sort,remove事件。
// Internal method to create a model's ties to a collection.
_addReference: function(model, options) {
this._byId[model.cid] = model;
var id = this.modelId(model.attributes);
if (id != null) this._byId[id] = model;
model.on('all', this._onModelEvent, this);
}

2.reset方法： 清除集合的模型，无声的增加新的模型数组，并触发reset事件。（当拿到数组行数据的时候用到，需要将数据转换为模型实例）,

all事件都是

3.add事件： 当模型变化的时候会触发，函数会接收到参数这个模型，这个集合，还有集合的参数。（model, this, addOpts）。

五，router

匹配规则：

1) /：query ，这个冒号是除了？／以外的匹配。

例子：

'abc/:loanId': function(loanId) {  //匹配abc/123，abc/32,构建的正则是,  /^abc\/([^\/?]+)(?:\?([\s\S]*))?$/
console.log(loanId)

}

//route:是构建的正则，fragment是hash片段。
//返回 ：匹配的参数（123，上个例子），和？问号后面的片段，以数组形势返回。
_extractParameters: function(route, fragment) {
var params = route.exec(fragment).slice(1);
return _.map(params, function(param, i) {
// Don't decode the search params.
if (i === params.length - 1) return param || null;
return param ? decodeURIComponent(param) : null;
});
}

2) ＊： 这个星号除了 ？ 以外的匹配。

路由的匹配规则 正则表达式的代码片段。

// var optionalParam = /\((.*?)\)/g;
// var namedParam = /(\(\?)?:\w+/g;
// var splatParam = /\*\w+/g;
// var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;

_routeToRegExp: function(route) {
route = route.replace(escapeRegExp, '\\$&')     // 将 - { } [ ] + ? . , \ ^ $ # 空格 等进行转义
.replace(optionalParam, '(?:$1)?') // 规则中的括号部分 也就是可有可没有的部分
.replace(namedParam, function(match, optional) {
return optional ? match : '([^/?]+)';  // 将不带括号部分的 但是:...形式的进行替换可以匹配为非/以外任意字符
})
.replace(splatParam, '([^?]*?)'); // 将*...形式的替换为除换行以外的任何字符匹
return new RegExp('^' + route + '(?:\\?([\\s\\S]*))?$');  //构建正则
},

路由触发时触发的对应的函数。如下：

/*
*@route, this.routes的key值，
*@ name,this.routes的value值，即对应的函数名。
route: function(route, name, callback) {

if (!_.isRegExp(route)) route = this._routeToRegExp(route);
if (_.isFunction(name)) {
callback = name;
name = '';
}
if (!callback) callback = this[name];
var router = this;
Backbone.history.route(route, function(fragment) {
var args = router._extractParameters(route, fragment);
if (router.execute(callback, args, name) !== false) {
router.trigger.apply(router, ['route:' + name].concat(args));
router.trigger('route', name, args);
Backbone.history.trigger('route', router, name, args);
}
});
return this;
},

2.初始化：

1）new router,写好路由规则， 将匹配函数入口注册，

2）Backbone.history.start(); // ，注册 pushstate, hashchange 等事件。触发就将匹配的 函数触发。

define(['backbone'], function () {

var Router = Backbone.Router.extend({

routes: {
'module1': 'module1',
'module2(/:name)': 'module2',
'*actions': 'defaultAction'
},

//路由初始化可以做一些事
initialize: function () {
},

module1: function() {
var url = 'module1/controller1.js';
//这里不能用模块依赖的写法，而改为url的写法，是为了grunt requirejs打包的时候断开依赖链，分开多个文件
require([url], function (controller) {
controller();
});
},

//name跟路由配置里边的:name一致
module2: function(name) {
var url = 'module2/controller2.js';
require([url], function (controller) {
controller(name);
});
},

defaultAction: function () {
console.log('404');
location.hash = 'module2';
}

});

var router = new Router();
router.on('route', function (route, params) {
console.log('hash change', arguments);  //这里route是路由对应的方法名
});

return router;    //这里必须的，让路由表执行
});

navigate方法：会将url,#后面的替换掉。

六，history

注册事件。

navigator方法：到页面。