观察者模式(发布订阅模式)的实现方式及应用场景
简述
发布订阅模式的概念:当一个或多个对象依赖于某一个对象,当这个对象的状态发生改变,所有依赖于它的对象都得到状态改变的通知。
一个简单的示例:
// 主体 class Subject { constructor() { this.state = 0 this.observers = [] } getState() { return this.state } setState(state) { this.state = state this.notifyAllObservers() } notifyAllObservers() { this.observers.forEach(item => { item.update() }) } attch(observer) { this.observers.push(observer) } } // 观察者 class Observer { constructor(name, subject) { this.name = name this.subject = subject this.subject.attch(this) } update() { console.log(`${this.name} update, state: ${this.subject.getState()}`) } } // 测试 这里创建了3个观察者 let s = new Subject() let o1 = new Observer('o1', s) let o2 = new Observer('02', s) let o3 = new Observer('03', s) s.setState(1) s.setState(2) s.setState(3) // 打印 o1 update, state: 1 02 update, state: 1 03 update, state: 1 o1 update, state: 2 02 update, state: 2 03 update, state: 2 o1 update, state: 3 02 update, state: 3 03 update, state: 3
应用场景
-
网页事件绑定
-
<button id="btn1">btn</button> <script> $('#btn1').click(function(){ console.log('1')}) $('#btn1').click(function(){ console.log('2')}) $('#btn1').click(function(){ console.log('3')}) </script> // jquery中同一个对象 btn1,绑定多个click事件
-
-
Promise
-
jQuery callbacks(比较底层不常用)
-
// 可以理解为自定义事件或者自定义回调 var callbacks = $.Callbacks() callbacks.add(function (info) { console.log('fn1', info) }) callbacks.add(function (info) { console.log('fn2', info) }) callbacks.add(function (info) { console.log('fn3', info) }) callbacks.fire('test1') callbacks.fire('test2')
-
-
node.js 自定义事件
-
// —————————示例1————————————— const EventEmitter = require('events').EventEmitter const emitter = new EventEmitter emitter.on('some', () => { // 监听 some 事件 console.log('some event is occured 1') }) emitter.on('some', () => { // 监听 some 事件 console.log('some event is occured 2') }) emitter.on('some', () => { // 监听 some 事件 console.log('some event is occured 3') }) emitter.emit('some') emitter.emit('some', 'xiaoming') // emit 可以传递参数过去 // ---------示例2------------ const EventEmitter = require('events').EventEmitter // 任何构造函数都可以继承 EventEmitter 的方法 on emit class Person extends EventEmitter { constructor(name) { super() this.name = name } } const jack = new Person('jack') jack.on('say', function () { console.log(this.name, 'say') }) setInterval(() => { jack.emit('say') }, 500) // ----------示例3--------------- // 在读取一个体积比较大的文件,可以使用文件的流操作 const fs = require('fs') const readStream = fs.createReadStream('./data/filel.text') // 读取文件的stream let length = 0 readStream.on('data', function(chunck) { length += chunck.toString().length }) readStream.on('end', function() { console.log(length) })
-
来源:https://www.cnblogs.com/liea/p/12556500.html