5 观察者模式on方法的使用

一.观察者模式on方法的使用

<script src="./jquery.min.js"></script>
<script>
    // 定义观察者模式中的 on 方法
    // 也就是向观察者模式中的消息盒子,添加要执行的方法

    // 添加要执行的方法
    // 添加的方法,要分为,方法的类型 和 方法的内容
    // 方法类型(type): 请家长   写检查   没收手机
    // 方法内容(function): 请家长 : 请老爸  请老妈 请爷爷 请奶奶 .....   
    //                    写检查 : 班主任1000字  教导主任2000字  校长3000字 ....
    //                  没收手机 : 没收1小时   没收1天   没收1辈子 ....
    // 相当于,一个是事件类型,一个是事件处理函数

    // 实现步骤和原理
    // 添加新的方法:
    //    先判断,事件类型是否已经存在
    //       如果类型已经存在,就直接在类型中,新增函数
    //       如果类型不存在,就要先新增类型,同时在类型中新增函数
    // 特别注意:
    //    新增添加的函数,一定是函数名称或者变量名称
    //    不能直接定义 function(){} 函数
    //    因为直接定义的函数,是无法删除的，他们的存储地址不同

    class Observer{
        constructor(){
            // 消息盒子,可以是对象,也可以是数组
            this.msg = {};
        }
        // type,就是事件类型
        // fun,就是具体的函数
        on(type,fun){
            // 如果没有这个类型,执行结果,undefined
            // 证明当前消息盒子中,没有这个类型
            if(this.msg[type] === undefined){
                // 就要新增这个类型,并且赋值要执行的函数
                // 因为一个类型中,会有多个函数,添加执行函数时,要是一个数组的形式
                // 数组中,可以添加索引是字符串的单元
                // 但是不会影响数组 length 的长度 比如type的值就是字符串
                this.msg[type] = [fun] ; 
            }else{
                // 这个类型已经存在了,就只需要,向类型中,数组,新增执行的函数就可以了
                this.msg[type].push(fun);
            }
        }

        emit(){}

        off(){}
    }


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



    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辈子');
    }

    

    // 总结
    // on方法
    // 1, 消息盒子可以是数组,也可以是对象
    //    对象是正常操作
    //    数组如果索引是字符串,也可以定义,只是,不会影响数组length的长度
    //    不能用 for 或者 forEach 或者 jQuery的each 循环遍历 , 只能使用 for...in 循环
    // 2, on方法的基本思路过程
    //    如果消息盒子中,没有这个 类型  this.msg[类型] === undefined
    //        新增类型,并且以数组的形式,存储函数方法  this.msg[类型] = [函数方法]
    //    如果消息盒子中, 有这个  类型
    //        直接在存储的数组中,新增函数方法  this.msg[类型].push(函数方法)


    // 数组中,可以添加索引是字符串的单元
    // 不会影响数组 length 的长度

    // 数组的索引,是字符串形式
    const arr = [];
    arr['a1'] = 'a1';
    arr['a2'] = 'a2';
    arr['a3'] = 'a3';
    arr['a4'] = 'a4';
    arr['a5'] = 'a5';

    arr.forEach(function(item,key){
        console.log(item,key);
    })   // 不可以用 不会报错但是不会执行

    for(let key in arr){
        console.log(key , arr[key]);
    }   //  可以用

    $(arr).each(function(key,item){
        console.log(key , item)
    })   // 不可以用 不会报错但是不会执行

</script>