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方法：到页面。