6 观察者模式off方法

二.观察者模式off方法

<script>
    // 观察者模式的off方法
    //   在已经添加到消息盒子中的类型以及方法中,删除方法
    //   如果有这个类型,有这个方法,再执行删除操作,如果没有,不做任何操作

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

        emit(){}

        off(type,fun){
            // 如果类型方法存在,再执行删除方法,如果类型方法不存在,不执行任何操作
            
            // 如果类型不存在
            if( this.msg[type] === undefined ){
                // 执行return,终止程序执行,不做任何操作
                return;
            }

            // 从类型中,查找函数方法,从数组中删除
            this.msg[type].forEach((item,key)=>{
                // 存储的函数,与输入的要删除的函数相同
                if(item === fun){
                    // 从当前单元的索引开始,删除一个单元
                    this.msg[type].splice(key , 1);
                    
                    // 防止数组坍塌
                    // 数组只要做删除操作,就要有i--
                    // i--;
                    // 如果是for循环,就要写i--
                }
            })

        }
    }


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

    // 删除事件

    observer.off('没收手机' , mo1);
    observer.off('没收手机' , mo2);


    console.log(observer);


    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 mo1(){
        console.log('没收手机1天');
    }

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

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


</script>