7 观察者模式emit方法

<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>

三.观察者模式emit方法

<script>
    // 观察者模式的emit方法
    // emit方法,是执行调用,已经存在与消息盒子中,类型中的函数方法
    // 也称为发布方法
    // 实现的原理和方法
    // 执行调用的方法,有可能是一个或者多个,是 不定项 执行
    // 需要使用 ...参数 并合运算符,将输入的实参 以 数组的形式存储在 参数中

    class Observer{
        constructor(){
            this.msg = {};
        }

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

        off(type,fun){
            if(this.msg[type] === undefined){
                return;
            }

            // for循环要防止数组坍塌  i--
            // 此时必须要写箭头函数  因为有this指向问题
            this.msg[type].forEach((item,key)=>{
                if(item === fun){
                    this.msg[type].splice(key,1);
                }
            })
        }

        // 第二个参数是 合并运算符,以数组的形式存储之后的所有的实参
        // funArr中有一个错误或者是不存在的 就报错
        emit(type , ...funArr){
            console.log(funArr);

            // 判断类型如果不存在,直接终止程序
            if(this.msg[type] === undefined){
                return;
            }

            // 如果类型存在,还要判断,函数是否存在
            // 如果存在,再来执行,函数

            // item 是 已经存储的 方法
            // 要与 在 funArr 中 输入 的数组,比较
            // 如果相同,证明消息盒子中,有这个数组,我们再执行
            // 此处可用function也可以用箭头函数
            this.msg[type].forEach(function(item){
                funArr.forEach(function(i){
                    // item 是已经存储在 消息盒子中的方法
                    // i    是通过参数,输入的需要执行的方法
                    // 要执行发布的方法,一定是已经存储在消息盒子中的方法
                    // 存储在消息盒子中的方法,也不是都发布,也要是参数中有的,要发布的方法
                    // 总之,就是消息盒子数组中存储的方法,必须与参数数组中存储的方法,对应上,才会执行发布
                    if(item === i){
                        item();
                    }
                })
            })
        }
    }

    // 创建观察者
    const observer = new Observer();
    
    // 第一次新增打电话类型,是新增类型,并且赋值一个数组,存储函数
    observer.on('打电话' , da1);
    // 打电话,类型已经存在,直接向数组中新增函数就可以了
    observer.on('打电话' , da2);

    // 写检查
    observer.on('写检查' , jian1);
    observer.on('写检查' , jian2);
    observer.on('写检查' , jian3);

    // 没收手机
    observer.on('没收手机' , mo1);
    observer.on('没收手机' , mo2);
    observer.on('没收手机' , mo3);

    console.log(observer);

    // jian1 , jian2 , jian3 以数组的形式,存储在参数2中
    observer.emit('写检查' , jian1 ,  jian5 )





    // 函数必须是提前定义好的,有函数名称,或者变量名称的,这样才能删除
    function da1(){
        console.log('请老爸,下午2点来学校');
    }

    function da2(){
        console.log('请老妈,下午3点来学校');
    }

    function jian1(){
        console.log('给班主任写1000字的检查');
    }

    function jian2(){
        console.log('给教导主任写2000字的检查');
    }

    function jian3(){
        console.log('给校长写3000字的检查');
    }

    function jian5(){
        console.log('给教育局局长写30000字的检查');
    }


    function mo1(){
        console.log('没收手机1天');
    }

    function mo2(){
        console.log('没收手机1年');
    }

    function mo3(){
        console.log('没收手机1辈子');
    }
</script>