4 观察者模式的基本概念及核心代码

一.观察者模式的基本概念

观察者模式的基本概念
所谓的观察者模式,是监听某个主体对象,如果主体对象发生改变,执行相关联的操作

典型的观察者模式是, jQuery中的 钩子函数

jQuery中的 钩子函数 监听的是 jQuery的 ajax请求
当 ajax 请求, 执行到不同步骤时,会触发不同的函数执行

观察者模式,在3阶段,配合vue框架,以及双向数据绑定时,会使用

二.观察者模式的核心代码

// 观察者模式的核心代码

// 需要一个观察者(一个对象)————可以是对象也可以是数组
// 观察者有一个属性(消息盒子) 记录存储要执行的程序内容

// 观察者方法1: on方法    向消息盒子中,添加需要执行的方法程序
// 观察者方法2: emit方法  发布执行消息盒子中,添加的方法程序
// 观察者方法3: off方法   删除消息盒子中,已经添加的方法程序

class CreateObj{
    constructor(){
        this.msg = [];  // 消息盒子,存储要执行的方法
    }

    on(){}      // 向消息盒子 this.msg 中,添加要执行的方法
    emit(){}    // 发布执行,消息盒子 this.msg 中,已经添加的方法 
    off(){}     // 删除消息盒子 this.msg 中,添加的方法
}

<script src="../02_代码/jquery.min.js"></script>
<script>
    class Observer{
        constructor(){
            this.msg={};
        }

        on(type,fun){
            if(this.msg[type]===undefined){
                this.msg[type]=[fun];
            }else{
                this.msg[type].push(fun);
            }
        }

        emit(type,...funArr){
            if(this.msg[type]===undefined){
                return;
            }
            this.msg[type].forEach(function(item){
                funArr.forEach(function(i){
                    if(item===i){
                        item();
                    }
                })
            })
        }

        off(type,fun){
            if(this.msg[type]===undefined){
                return;
            }
            this.msg[type].forEach((item,key)=>{
                if(item===fun){
                    this.msg[type].splice(key,1);
                }
            });
        }
    }

    const observer=new Observer();

    observer.on('你在干嘛',A1);
    observer.on('你在干嘛',B1);
    observer.on('你在干嘛',C1);

    observer.off('你在干嘛',A1);
    observer.emit('你在干嘛',B1,C1);

    function A1(){
        console.log('玩');
    }
    function B1(){
        console.log('跑步');
    }
    function C1(){
        console.log('走路');
    }
</script>