Backbone

什么是MVC模式

- 模式：一种解决问题的方法
  - 设计模式：工厂模式、适配器模式、观察者模式等
  - 框架模式：MVC、MVP、MVVM等（框架模式里有很多设计模式）
- MVC：
  - M-Model
  - V-View
  - C-Controller(连接M和V)

　　2.　MVC模式的思想

- 把M和V分开
- 服务器端MVC模式非常容易实现

　　3. Web前端MVC模式

- Web页面本身就是一个大的View，不容易做到分享操作
- backbone适合复杂的大型开发

　　4. backbone的模块

- Events事件驱动方法
- Model数据模型
- Collection模型集合器
- Router路由器(hash)
- History开启历史管理
- Sync同步服务器方式
- View视图（含事件行为和渲染页面）

　　5. backbone入门

- 了解jQuery，服务器环境，面向对象
- UnderscoreJS库--一些数组、对象、事件的常用方法，针对模型和集合
- jQuery库--针对视图实现具体效果

　　6. 基本使用

- 直接创建对象
- 给构造函数添加实例方法和静态方法
- 继承操作
- 自定义事件

backbone教程：https://github.com/the5fire/backbonejs-learning-note

backbone实例:http://backbonejs.org/examples/todos/index.html

Backbone精髓，观察者模式和事件

果然是精髓

http://www.pchou.info/javascript/2014/04/23/backbone-event.html

观察者模式

http://www.cnblogs.com/darr/p/5013787.html

其实，个人认为UI交互逻辑最需要的是MV模式，即模型和视图的关联，至于控制器，可有可无。而M和V之间的实现关联的重要设计模式之一就是观察者模式，即由于视图呈现的复杂和多样化，为了便于扩展，需要视图有一种随模型数据的变化而“自行变化”的能力，而实现方式就是，视图通过侦听模型对象的变化而渲染自己，不需要外力来渲染，外力只需要改变唯一的标准–模型对象就可以了。

Backbone的事件

根据上面讨论，要实现观察者模式，事件是非常重要的机制。在浏览器和javascript中，原生的事件是浏览器实现的基于DOM的事件体系。然而，这在我们需要的M和V的观察者模式中是不够的。幸好，Backbone实现了这样的机制。有了它，能够让任何javascript对象拥有“事件能力”，来看看是如何做到的：

你可能没有注意过Backbone.Events就是事件实现的核心，它可以让对象拥有事件能力

var Events = Backbone.Events = { .. }

那么具体的看，事件能力究竟包含哪些能力呢？我们简单的来看一下：

listenTo: function(obj, name, callback)

使当前对象侦听obj对象的一个叫name的事件，当事件被触发后，回调callback

listenToOnce: function(obj, name, callback)

使当前对象侦听obj对象的一个叫name的事件，当事件被触发后，回调callback一次（以后不会再回调）

trigger: function(name)

当前对象触发name事件

看下面的实验下面的代码：

var model = _.extend({},Backbone.Events);
var view = _.extend({},Backbone.Events);
view.listenTo(model,'custom_event',function(){ alert('catch the event') });
model.trigger('custom_event');

可以在jsfiddle上实验这个代码，结果如下：

可以看到，依靠Backbone.Events是可以实现观察者模式的。因为对于上面代码的model对象而言，它并不知道view对象在侦听它，甚至可以有更多的其他对象去侦听这个model。这样的话，如果model发生了某种改变就可以通过事件来发出通知。

但是，大量的将Backbone.Events扩展到实际的对象上，显然是一种内存浪费，那么何不将它扩展到原型prototype上呢?于是就有了Backbone的Model和View等核心类。例如Backbone.Model：

var Events = Backbone.Events = { .. }

var Model = Backbone.Model = function(attributes, options) {
	...
	};

_.extend(Model.prototype, Events, { ... })

从上面的代码可以看出，Backbone核心的类只不过是将Backbone.Events扩展到自身的prototype上罢了，这样所有基于Backbone核心类创建出来的对象就有了事件能力。

下面是一个体现观察者模式的经典例子：

var Todo = Backbone.Model.extend({
	model.trigger('destroy');
});

var TodoView = Backbone.View.extend({

    events: {
      "click a.destroy" : "clear",
    },

    initialize: function() {
      this.listenTo(this.model, 'destroy', this.remove);
    },

    clear: function() {
      this.model.destroy();
    },

	remove: function() {
      this.$el.remove();
    }

});

上面的例子忽略了很多细枝末节，只是想说明一个界面元素的删除动作，首先是删除模型，模型随后触发删除事件，由于这个删除事件，界面元素才被删除

探究Backbone事件的实现原理

被侦听的对象维护一个事件数组_event，其他对象在调用listenTo时，会将事件名与回调维护到队列中：

一个事件名可以对应多个回调，对于被侦听者而言，只知道回调的存在，并不知道具体是哪个对象在侦听它。

当被侦听者调用trigger(name)时，会遍历_event，选择同名的事件，并将其下面所有的回调都执行一遍。

总结

Backbone虽然是MVC模式的框架，但是其核心却是UI界面的观察者模式和事件机制。有了事件，并灵活运用观察者模式，才能实现复杂界面的复杂逻辑。

posted @ 2015-07-06 23:34 darr 阅读(283) 评论(0) 编辑收藏举报

刷新页面返回顶部

darr