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

时间 2019-11-07

标签 javascript 观察者发布订阅模式栏目 JavaScript 繁體版

原文原文链接

定义

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

和其余模式相比，这种模式又增长了一个原则:html

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

因此主要的想法是咱们要有一个大的对象来处理订阅（Subject/Observable），以及不少对象（Observers）被订阅而后等待事件触发。java

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

基础例子

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来删除，而不是传入回调函数，那么代码须要改为下面这样：git

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

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

Push - 当一个事件发生后将通知全部观察者，并把全部的新数据传给他们api
Pull - 当一个事件发生后将通知全部观察者，每一个观察者将拉取本身须要的数据数组

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

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()复制代码

资料

原文：bumbu.github.io/javascript-…译者：缪宇