JS设计模式-观察者模式（核心）

观察者模式是前端设计模式的核心

介绍

• 发布 & 订阅
• 一对多
  什么是发布 & 订阅？
  
  我说好了一件事情，等着别人来做。 比如，我躺在家里，订了一份外卖，然后等着，会有人来给你触发。
  一对多就像一个拍卖品一样，同时可以有多个人观察它。

UML类图

uml_observer.png

左侧是Observer，就是观察者，它有一个update方法，当观察者需要被触发的时候执行update。
右侧是主题，主题可以绑定多个观察者，放在observers里面。
主题可以获取状态（getState()),也可以设置状态（setState())
当状态设置完成后，他会触发所有的观察者（notifyAllObservers()),
触发所有观察者里面的update方法。
观察者定义好以后，它就等待被更新，等待被触发，当然，前提是它已经定义好了。
注意一对多，主题是一个，但是观察者可能是多个。
可能还不是很理解，可以看看下面代码演示，仔细看几遍，比较容易理解。

代码演示

// 主题，接收状态变化，触发每个观察者
class Subject {
  constructor() {
      this.state = 0
      this.observers = []
  }
  getState() {
      return this.state
  }
  setState(state) {
      this.state = state
      this.notifyAllObservers()
  }
  attach(observer) {
      this.observers.push(observer)
  }
  notifyAllObservers() {
      this.observers.forEach(observer => {
          observer.update()
      })
  }
}

// 观察者，等待被触发
class Observer {
  constructor(name, subject) {
      this.name = name
      this.subject = subject
      this.subject.attach(this)
  }
  update() {
      console.log(`${this.name} update, state: ${this.subject.getState()}`)
  }
}

// 测试代码
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)

s.setState(1)
s.setState(2)
s.setState(3)

运行结果如下图

image.png

场景

• 网页事件绑定
• Promise
• jQuery callbacks
• nodejs 自定义事件

网页事件绑定

btn

//  每次点击都会打印 11 22 33

Promise

var src = 'http://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)
console.log(result)

result.then(function (img) {
  console.log('success 1')
}, function () {    
  console.log('failed 1')
})
// then就是一个观察者，等待前一个处理完成

Jquery $.Callbacks()

    
    


    
jQuery callbacks
    

    
    

nodejs 自定义事件

const EventEmitter = require('events').EventEmitter

const emitter1 = new EventEmitter()
emitter1.on('some', () => {
    // 监听 some 事件
    console.log('some event is occured 1')
})
emitter1.on('some', () => {
    // 监听 some 事件
    console.log('some event is occured 2')
})
// 触发 some 事件
emitter1.emit('some')

继承

const EventEmitter = require('events').EventEmitter

// 任何构造函数都可以继承 EventEmitter 的方法 on emit
class Dog extends EventEmitter {
    constructor(name) {
        super()
        this.name = name
    }
}
var simon = new Dog('simon')
simon.on('bark', function () {
    console.log(this.name, ' barked')
})
setInterval(() => {
    simon.emit('bark')
}, 500)

var fs = require('fs')
var readStream = fs.createReadStream('./data/file1.txt')  // 读取文件的 Stream

var length = 0
readStream.on('data', function (chunk) {
    length += chunk.toString().length
})
readStream.on('end', function () {
    console.log(length)
})

const EventEmitter = require('events').EventEmitter

// 任何构造函数都可以继承 EventEmitter 的方法 on emit
class Dog extends EventEmitter {
    constructor(name) {
        super()
        this.name = name
    }
}
var simon = new Dog('simon')
simon.on('bark', function () {
    console.log(this.name, ' barked')
})
setInterval(() => {
    simon.emit('bark')
}, 500)

var fs = require('fs')
var readStream = fs.createReadStream('./data/file1.txt')  // 读取文件的 Stream

var length = 0
readStream.on('data', function (chunk) {
    length += chunk.toString().length
})
readStream.on('end', function () {
    console.log(length)
})

var readline = require('readline');
var fs = require('fs')

var rl = readline.createInterface({
    input: fs.createReadStream('./data/file1.txt')
});

var lineNum = 0
rl.on('line', function(line){
    lineNum++
});
rl.on('close', function() {
    console.log('lineNum', lineNum)
});

其他场景

• nodejs中：处理http请求，多进程通讯
• vue和react组件生命周期触发
• vue watch

nodejs 处理http请求

var http = require('http')

function serverCallback(req, res) {
    var method = req.method.toLowerCase() // 获取请求的方法
    if (method === 'get') {
    }
    if (method === 'post') {
        // 接收 post 请求的内容
        var data = ''
        req.on('data', function (chunk) {
            // “一点一点”接收内容
            console.log('chunk', chunk.toString())
            data += chunk.toString()
        })
        req.on('end', function () {
            // 接收完毕，将内容输出
            console.log('end')
            res.writeHead(200, {'Content-type': 'text/html'})
            res.write(data)
            res.end()
        })
    }
    
}
http.createServer(serverCallback).listen(8081)  // 注意端口别和其他 server 的冲突
console.log('监听 8081 端口……')

设计原则验证

• 主题和观察者分离，不是主动触发而是被动监听，两者解耦
• 符合开放封闭原则

1. 本文资料来自慕课网-双越老师-Javascript 设计模式系统讲解与应用视频课程。