介绍

  • 发布订阅
  • 一对多（1对n）

示例

  • 订报纸
  • 订牛奶

UML类图

点击查看【processon】

代码

  1. // 保存所有状态，状态变化后触发所有观察者对象
  2. class Subject {
  3.   constructor() {
  4.     this.state = 0
  5.     this.observers = []
  6.   }
  8.   getState() {
  9.     return this.state
  10.   }
  12.   setState(state) {
  13.     this.state = state
  14.     this.notifyAllObservers()
  15.   }
  17.   attach(observer) {
  18.     this.observers.push(observer)
  19.   }
  21.   notifyAllObservers() {
  22.     this.observers.forEach(observer => {
  23.       observer.update()
  24.     })
  25.   }
  26. }
  28. // 观察者
  29. class Observer {
  30.   constructor(name, subject) {
  31.     this.name = name
  32.     this.subject = subject
  33.     this.subject.attach(this)
  34.   }
  36.   update() {
  37.     console.log(`name:${this.name} update, state: ${this.subject.getState()}`);
  38.   }
  39. }
  41. // test
  42. const s = new Subject()
  43. const o1 = new Observer('o1', s)
  44. const o2 = new Observer('o2', s)
  45. const o3 = new Observer('o3', s)
  47. s.setState(1)

场景

  • 网页事件绑定 ```html 

  2. - Promise
  3. - jquery callbacks
  4. - nodejs 自定义事件
  5.    - EventEmitter
  6. ```javascript
  7. const EventEmitter = require('events').EventEmitter
  8. const events = new EventEmitter()
  10. // 监听 some 事件
  11. events.on('some', info => {
  12.   console.log('fn1', info)
  13. })
  14. // 监听 some 事件
  15. events.on('some', info => {
  16.   console.log('fn2', info)
  17. })
  19. // 触发 some 事件
  20. events.emit('some', 'xxxxxx')
  1. const EventEmitter = require('events').EventEmitter
  3. class Dog extends EventEmitter {
  4.   constructor(name) {
  5.     super()
  6.     this.name = name
  7.   }
  8. }
  9. let dog = new Dog('dog1')
  10. dog.on('bark', (name) => {
  11.   console.log(name, 'bark-1')
  12. })
  13. dog.on('bark', (name) => {
  14.   console.log(name, 'bark-2')
  15. })
  17. setInterval(() => {
  18.   dog.emit('bark', 'ss')
  19. }, 1000)
  • Stream ```javascript const fs = require(‘fs’) const path = require(‘path’)

const stream = fs.createReadStream(path.resolve(__dirname, ‘../release/bundle.js’))

let length = 0 stream.on(‘data’, (chunk) => { let len = chunk.toString().length console.log(‘len’, len); length += len }) stream.on(‘end’, () => { console.log(‘length’, length); })

  2.    - readline
  3. ```javascript
  4. const readline = require('readline')
  5. const fs = require('fs')
  6. const path = require('path')
  8. const rl = readline.createInterface({
  9.   input: fs.createReadStream(path.resolve(__dirname, '../package-lock.json'))
  10. })
  12. let lineNum = 0
  13. rl.on('line', (line) => {
  14.   lineNum++
  15. })
  16. rl.on('close', () => {
  17.   console.log('lineNum', lineNum)
  18. })
  • nodejs中处理http请求（post），多进程通信（child_process）
  • vue，react组件生命触发
  • vue的watch

设计原则验证

  • 主题和观察者分离，不是主动触发，而是被动监听，两者解耦
  • 符合OCP