JavaScript设计模式之观察者模式

w候人兮猗

发布于 2020-07-01 16:37:36

65400

代码可运行

文章被收录于专栏：w候人兮猗的博客w候人兮猗的博客

运行总次数：0

代码可运行

Contents

1 介绍
2 实例
3 UML
4 代码演示
5 场景
- 5.1 网页事件绑定
- 5.2 Promise
- 5.3 jq callbacks
- 5.4 nodejs自定义事件
- 5.5 其他场景
- 5.6 代码

介绍

发布订阅
一对多

实例

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

UML

代码演示

    // 主题 保存状态 状态变化之后触发所有观察者
    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)

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

场景

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

网页事件绑定

    <button id="btn1">btn</button>

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年1月16日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript