MEAN-MVC模式下routers的作用与backbone学习

今天跟张同学进行了交流，他提出几个问题：backbone动态加载，以及bonusType的MVC理解。我当时回答的是bonusType模块中model部分对应m，handlers部分对应c，routes部分对应v。但是他问routes怎么对应时，我理解不够深入。还有backbone的动态加载也是不能很好的阐述。所以今晚先学习这两个。     　   MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程：　   1. 用户和应用产生交互。　　2. 控制器的事件处理器被触发。　　3. 控制器从模型中请求数据，并将其交给视图。　　4. 视图将数据呈现给用户。我们不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。##视图层是呈现给用户的，用户与之产生交互。首先我们知道在models中定义了对象，并在handlers中定义了各种方法。然后在routers中有这么几个函数：

        router.get('/', accessStackMiddleware, handler.getList);
        router.get('/getForDD', handler.getForDD);
         router.post('/', accessStackMiddleware, handler.create);
         router.patch('/', accessStackMiddleware, handler.patchM);
            router.delete('/:_id',accessStackMiddleware,  handler.remove);
         router.delete('/', accessStackMiddleware, handler.bulkRemove);

很明显是调用了handlers中的各种方法，而且还有一句：

         router.use(authStackMiddleware);

由之前我们理解的后端处理看作中间件，一个中间件执行完接下一个中间件。也就是中间件决定启动顺序，所以：
程序的加载入口是rounter，来指定对应的model及controller。路由是负责显示模板，（handlers）加载数据，以及管理应用程序的状态。




#backbone学习
    在处理涉及大量JavaScript的Web应用程序时，将数据绑定到DOM最终会导致很多的jQuery选择器和回调堆，它们都疯狂地试图使数据在HTML UI，JavaScript逻辑和服务器上的数据库之间保持同步。所以我们这里引入backbone的概念，它可以将数据表示为models，因此UI操作就可以直接导致data的变化，而不用查看那一堆DOM，这么神奇，我有点期待。
    

primitives that are generally useful 

在实现上其实就是当数据改变时发出通知，而VIEW处于监听状态，侦听更改并呈现UI。

这里引入了Collection的概念，就是用来帮助你处理一组相关的模型，集合可以对其中的模型发生的所有事件进行代理，从而允许在一个地方收听集合中任何模型可能发生的更改。这也容易理解，要是VIEW一个一个的监听data，数据多的话那岂不是要爆炸了。

Backbone is pre-configured to sync with a RESTful API. Simply create a new Collection with the url of your resource endpoint:

var Books = Backbone.Collection.extend({
  url: '/books'
});

然后是model与collection一起使用：

GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET  /books/1 ... model.fetch();
PUT  /books/1 ... model.save();
DEL  /books/1 ... model.destroy();

有没有一点像bonusType中的routers。

当API获取JSON数据时，collection转为数组，model转为数据并填充自己：

[{"id": 1}] ..... populates a Collection with one model.
{"id": 1} ....... populates a Model with one attribute.

每个视图管理其自己的DOM元素中的渲染和用户交互

the Router detects changes to the URL ，这里也可以加深之前对bonusType的routers的理解。

backbone中的事件Event定义为一个可以混入任何对象的模块，赋予对象绑定和触发自定义命名事件的能力。 事件不必在绑定之前进行声明，并且可能需要传递参数：

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

onobject.on(event, callback, [context])Alias: bind 

book.on("change:title change:author", ...);

将回调函数绑定到一个对象。 回调将在事件触发时被调用。 如果页面上有大量不同的事件，则惯例是使用冒号命名空间：“poll：start”或“change：selection”。 事件字符串也可以是多个事件的以空格分隔的列表...

Backbone.Collection


集合是有序的模型集合。 可以绑定“更改”事件，以便在集合中的任何模型被修改时收到通知，侦听“添加”和“移除”事件，从服务器获取集合，并使用Underscore.js方法。

为方便起见，集合中的模型触发的任何事件也将直接在集合上触发。 这允许监听集合中任何模型中特定属性的更改，例如：documents.on（“change：selected”，...）

modelcollection.model（[attrs]，[options]）

重写此属性以指定集合包含的模型类。 如果已定义，则可以传递原始属性对象（和数组）以添加，创建和重置，并将这些属性转换为适当类型的模型。

Backbone.Router

之前已经有很多理解了。

Backbone.history

历史充当全局路由器（per frame）来处理hashchange事件或pushState，匹配适当的路由并触发回调。

Backbone.sync

Backbone.sync是backbone每次尝试读取或保存模型到服务器时调用的功能。 默认情况下，它使用jQuery.ajax创建一个RESTful JSON请求并返回一个jqXHR。 

Backbone.View

backbone视图很常规 - 它们不会确定任何有关HTML或CSS的内容，并且可以用于任何JavaScript模板库。 总的想法是组织界面到逻辑视图，通过模型支持其中的每一个可独立更新的模式发生变化，而不需要重绘页面。 并不是常规解析一个JSON对象，然后在DOM中查找元素，并手动更新HTML，它可以绑定视图的渲染功能模型的“change”事件，从而可以立即更新。

真的很晚了，好困。所以先看了backbone的骨干，其中细分和example有空再看。