JavaScript 观察者 (发布/订阅) 模式

最新推荐文章于 2023-07-27 22:48:33 发布

qq_36320160

最新推荐文章于 2023-07-27 22:48:33 发布

阅读量79

点赞数

分类专栏：前端文章标签： JavaScript

原文链接：https://www.mk2048.com/blog/blog.php?id=0200kb0i0j&title=JavaScript+%E8%A7%82%E5%AF%9F%E8%80%85+%28%E5%8F%91%E5%B8%83%2F%E8%AE%A2%E9%98%85%29+%E6%A8%A1%E5%BC%8F

版权

前端专栏收录该内容

520 篇文章 2 订阅

订阅专栏

定义

观察者模式定义了对象之间一对对多的依赖关系，当一个对象改变了状态，它的所有依赖会被通知，然后自动更新。

和其他模式相比，这种模式又增加了一个原则:

在相互作用的对象之间进行松散耦合设计

所以主要的想法是我们要有一个大的对象来处理订阅（Subject/Observable），以及很多对象（Observers）被订阅然后等待事件触发。

还有一个重要的点就是Observers接受消息的顺序是随机的，所以你不要依照Observers添加的顺序。

基础例子

var Observable = {
    observers: []
  , addObserver: function(observer) {
      this.observers.push(observer)
    }
  , removeObserver: function(observer) {
      var index = this.observers.indexOf(observer)

      if (~index) {
        this.observers.splice(index, 1)
      }
    }
  , notifyObservers: function(message) {
      for (var i = this.observers.length - 1; i >= 0; i--) {
        this.observers[i](message)
      };
    }
  }

Observable.addObserver(function(message){
  console.log("First observer message:"   message)
})

var observer = function(message){
  console.log("Second observer message:"   message)
}

Observable.addObserver(observer)

Observable.notifyObservers('test 1')
// Second observer message:test 1
// First observer message:test 1

Observable.removeObserver(observer)

Observable.notifyObservers('test 2')
// First observer message:test 2

如果你想用某种形式的ID来删除，而不是传入回调函数，那么代码需要改成下面这样：

var Observable = {
    observers: []
  , lastId: -1
  , addObserver: function(observer) {
      this.observers.push({
        callback: observer
      , id:   this.lastId
      })

      return this.lastId
    }
  , removeObserver: function(id) {
      for (var i = this.observers.length - 1; i >= 0; i--) {
        this.observers[i]
        if (this.observers[i].id == id) {
          this.observers.splice(i, 1)
          return true
        }
      }

      return false
    }
  , notifyObservers: function(message) {
      for (var i = this.observers.length - 1; i >= 0; i--) {
        this.observers[i].callback(message)
      };
    }
  }

var id_1 = Observable.addObserver(function(message){
  console.log("First observer message:"   message)
})

var observer = function(message){
  console.log("Second observer message:"   message)
}

var id_2 = Observable.addObserver(observer)

Observable.notifyObservers('test 1')
Observable.removeObserver(id_2)
Observable.notifyObservers('test 2')

pull vs push

观察者模式有两种重要的策略：

Push - 当一个事件发生后将通知所有观察者，并把所有的新数据传给他们
Pull - 当一个事件发生后将通知所有观察者，每个观察者将拉取自己需要的数据

当你只想要你需要的数据，Pull 方法更为可取，在下面这个例子中，Subject将会通知观察者发生了改变，然后每个观察者取它们自己需要的数据。并且在这个例子中，我们隐藏观察者数组，并且将各自的私有数据存到闭包中。

var Observable = {}

;(function(O){
  var observers = []
    , privateVar

  O.addObserver = function(observer) {
    observers.push(observer)
  }

  O.removeObserver = function(observer) {
    var index = observers.indexOf(observer)

    if (~index) {
      observers.splice(index, 1)
    }
  }

  O.notifyObservers = function() {
    for (var i = observers.length - 1; i >= 0; i--) {
      observers[i].update()
    };
  }

  O.updatePrivate = function(newValue) {
    privateVar = newValue
    this.notifyObservers()
  }

  O.getPrivate = function() {
    return privateVar
  }
}(Observable))

Observable.addObserver({
  update: function(){
    this.process()
  }
, process: function(){
    var value = Observable.getPrivate()
    console.log("Private value is: "   value)
  }
})

Observable.updatePrivate('test 1')
// Private value is: test 1

Observable.updatePrivate('test 2')
// Private value is: test 2

观察者模式之主题

为了不创建多个可观察对象，最好在观察者模式中加入主题功能，最简单的形式看起来是这样的：

var Observable = {
    observers: []
  , addObserver: function(topic, observer) {
      this.observers[topic] || (this.observers[topic] = [])

      this.observers[topic].push(observer)
    }
  , removeObserver: function(topic, observer) {
      if (!this.observers[topic])
        return;

      var index = this.observers[topic].indexOf(observer)

      if (~index) {
        this.observers[topic].splice(index, 1)
      }
    }
  , notifyObservers: function(topic, message) {
      if (!this.observers[topic])
        return;

      for (var i = this.observers[topic].length - 1; i >= 0; i--) {
        this.observers[topic][i](message)
      };
    }
  }

Observable.addObserver('cart', function(message){
  console.log("First observer message:"   message)
})

Observable.addObserver('notificatons', function(message){
  console.log("Second observer message:"   message)
})

Observable.notifyObservers('cart', 'test 1')
// First observer message:test 1

Observable.notifyObservers('notificatons', 'test 2')
// Second observer message:test 2

更高级的功能会有如下特性：

子话题 (比如 /bar/green 或者 bar.green)
发布到主题传播到子主题
发布到所有主题
订阅者优先级

观察者模式之jQuery.Callback

jQuery有一个很好的特性，$.Callback。除了经典的观察功能外，他还有其他的一组标记：

once: 确保callback列表只能被触发一次
memory: 跟踪数据
unique: 确保回调函数只会被添加一次。
stopOnFalse: 当回调函数返回false，则中断调用。

使用这些选项你可以定制的你的观察者。让我们来看看最基础的例子：

var callbacks = jQuery.Callbacks()
  , Topic = {
      publish: callbacks.fire,
      subscribe: callbacks.add,
      unsubscribe: callbacks.remove
    }

function fn1( value ){
  console.log( "fn1: "   value );
}

function fn2( value ){
  console.log("fn2: "   value);
}

Topic.subscribe(fn1);
Topic.subscribe(fn2);

Topic.publish('hello world!');
Topic.publish('woo! mail!');

如果你想看一些复杂的例子，请点这里。

CoffeeScript例子

下面是一个简单的例子，几乎相同的例子可以在“CoffeeScript Cookbook [7]”中找到。

class Observable
    constructor: () ->
        @subscribers = []
    subscribe: (callback) ->
        @subscribers.push callback
    unsubscribe: (callback) ->
        @subscribers = @subscribers.filter (item) -> item isnt callback
    notify: () ->
        subscriber() for subscriber in @subscribers

class Observer1
    onUpdate: () ->
        console.log "1st got new message"

class Observer2
    onUpdate: () ->
        console.log "2nd updated"

observable = new Observable()
observer1 = new Observer1()
observer2 = new Observer2()

observable.subscribe observer1.onUpdate
observable.subscribe observer2.onUpdate
observable.notify()