（四）JS学习笔记 - 模式 - 观察者模式

浏览数：32 / 时间：2015年06月09日

理解观察者模式

简单的讲，一个对象作为特定任务或是另一对象的活动的观察者，并且在这个任务或活动发生时，利用事件的形式通知观察者。

观察者的使用场合

当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。

例如，用户A，B，C分别订阅某服务，当服务有更新是可设定更新、下载等操作。

模拟实现

定义Observable对象，其内部包含了2个方法：add（订阅）与fire（发布）方法

// 观察者
var Observable = {
  callbacks: [],
  add: function(fn) {
    this.callbacks.push(fn);
  },
  fire: function() {
    this.callbacks.forEach(function(fn) {
      fn();
    })
  }
}

1 Observable.add(function() {
2     console.log(1);
3 })
4 Observable.add(function() {
5     console.log(2);
6 })

发布

Observable.fire();     // 1, 2

实际应用

实际业务中，如请求某个ajax后需要执行多个方法，数据处理、渲染页面、其他业务等，可以使用观察者

 1 Observable.add(function() {
 2   //pocessData
 3 })
 4 
 5 Observable.add(function() {
 6   $(‘test‘).html(data.a)
 7   $(‘test2‘).html(data.b)
 8   $(‘test3‘).html(data.c)
 9 })
10 
11 Observable.add(function() {
12   //pocessOther
13 })
14 
15 $.ajax({
16   url: "test.html",
17   context: document.body
18 }).done(function(data) {
19   Observable.fire(data)
20 })