JavaScript设计模式之观察者模式

介绍

• 发布订阅
• 一对多

实例

• 肯德基点餐后等着被叫号
• 订报纸后每天等着送报纸

UML

![image]https://www.ahwgs.cn/wp-content/uploads/2019/01/7O6ZU39F9R0PB_RPM1D.png)

代码演示

    // 主题 保存状态 状态变化之后触发所有观察者
    class Subject{
        constructor() {
            this.state = 0
            this.obsevers = []
        }
        getState(){
            return this.state
        }
        setState(state){
            this.state = state
            this.notifyAllObservers()
        }

        notifyAllObservers(){
            this.obsevers.forEach(observer=>{
                observer.update()
            })
        }
        attach(observer){
            this.obsevers.push(observer)
        }
    }
    //观察者
    class Observer{
        constructor(name,subject) {
            this.name = name;
            this.subject = subject
            this.subject.attach(this)
        }
        update(){
            console.log(this.name +'-----'+ this.subject.getState())
        }
    }

    //测试
    //初始化一个主题
    let s = new Subject()
    let ob1 = new Observer('ob1',s)
    let ob2 = new Observer('ob2',s)
    let ob3 = new Observer('ob3',s)

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

image

• 每一次setState都会触发所有的观察者更新

场景

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

网页事件绑定

    btn

function $(ele) {
        return document.querySelector(ele)
    }
    $('#brn1').click()function f() {
        console.log(2)
    }
    $('#brn1').click()function f() {
        console.log(3)
    }
    $('#brn1').click()function f() {
        console.log(4)
    }
    // 2 3 4

• 为一个元素绑定多个事件 会同时更新状态

Promise

        function loadImg(src) {
            return new Promise((resolve, reject)=>{
                const img = document.createElement('img');
                img.onload = function () {
                    resolve(img)
                }
                img.onerror = function () {
                    reject('图片加载失败')
                }
                img.src = src
            })
        }

        let src = ''
        let result = loadImg(src)
        result.then(function (img) {
            console.log(img.width)
            return img
        }).then(function (img) {
            console.log(img.height)
        })

• 两个then执行的函数，如果promise变化，那么这两个then里面的数据也会同时变化

jq callbacks

        var callbacks = $.Callback()
        callbacks.add(function (info) {
            console.log('fun1',info)
        })
        callbacks.add(function (info) {
            console.log('fun2',info)
        })
        callbacks.add(function (info) {
            console.log('fun3',info)
        })
        callbacks.fire('gogogo')
        callbacks.fire('fire')

nodejs自定义事件

    const EventEmitter = require('event').EventEmitter
    const emitter1 = new EventEmitter()

    emitter1.on('some',()=>{
        //监听
        console.log('some event 1')
    })
    
    emitter1.on('some',()=>{
        //监听
        console.log('some event 2')
    })
    
    emitter1.emit('some')
    
    class Dog extends EventEmitter{
        constructor(name){
            super();
            this.name = name
        }
    }
    var simon = new Dog('simon')
    simon.on('back',function () {
        console.log('---'+this.name +'back')
    })
    setInterval(()=>{
        simon.emit('back')
    },500)

其他场景

• nodejs 处理http请求，多进程通信
• vue/react组件生命周期触发
• vue watch监听data变化

代码:

https://github.com/ahwgs/design-pattern-learning/tree/master/9.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F

原文

https://www.ahwgs.cn/javascriptshejimoshizhiguanchazhemoshi.html