设计模式之观察者模式

观察者模型

观察者模式

概述

观察者模式是前端使用的最多模式 （vue）订阅者模式 消息模式… 主要是通过事件派发的机制进行工作的

//完成观察者模式
class obServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件
    on(){

    }
    //派发事件
    emit(){

    }
    //取消事件
    off(){

    }
}

on

//完成观察者模式
class obServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件
    emit(){

    }
    //取消事件
    off(){

    }
}

emit

//完成观察者模式
class ObServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件 执行事件
    emit(type,...args){ //事件类型  参数
        //判断事件是否发布
        if(!this.message[type]) return
        //对参数进行一个包装
        const event = {
            type:type,
            args: args || {}
        }
        //执行函数
        this.message[type].forEach(fn => {
            fn.call(this,event) //回调调用
        });
    }
    //取消事件
    off(){
    }
}

off

//完成观察者模式
class ObServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件 执行事件
    emit(type,...args){ //事件类型  参数
        //判断事件是否发布
        if(!this.message[type]) return
        //对参数进行一个包装
        const event = {
            type:type,
            args: args || {}
        }
        //执行函数
        this.message[type].forEach(fn => {
            fn.call(this,event) //回调调用
        });
    }
    //取消事件
    off(type,fn){
        //判断事件是否发布
        if(!this.message[type]) return
        this.message[type].forEach((fn1,index)=> {
            //删除对应的fn
            if(Object.is(fn,fn1)){ //判断俩个函数是否是一个函数对象（不能传new的形式）
                this.message[type].splice(index,1)
            }
        });
    }
}

调用

function a(e){
    console.log('hello');
}
function b(e){
    console.log('hi');
}
let obServer = new ObServer() //创建一个观察者
//发布一个事件
obServer.on('abc',a)
obServer.on('abc',b)
//执行方法
obServer.emit('abc',10,20)
//取消方法
obServer.off('abc',a)
obServer.off('abc',b)
obServer.emit('abc',10,20)