js设计模式-观察者模式

一、前言

    发布-订阅模式，即观察者模式。在JavaScript中，使用自定义事件及回调函数的方式来实现这种模式。

二、正文

    下面代码为1个简单的观察者模式的事件发布-订阅机制

       class Event{
            constructor(){
                //初始化事件缓存
                this.cacheEvents = {};
            }    
            //绑定事件
            $on(key,fn){
                if(!this.cacheEvents[key]){
                    this.cacheEvents[key]=[];
                }
                this.cacheEvents[key].push(fn);
            }
            //触发事件
            $emit(key){
                let eArr = this.cacheEvents[key];
                for(let i=0;i<eArr.length;i++){
                    eArr[i]();
                }
            }
            //移除事件绑定
            $off(key){
                this.cacheEvents[key].length = 0;
            }
        }
        let e = new Event();
        //绑定事件名及回调函数，同1事件名可绑定多个回调函数，在触发的时候会将同1事件名的回调全部执行
        e.$on("clickTest1",()=>{
            alert("clickTest1")
        })
        e.$on("clickTest1",()=>{
            alert("clickTest1-1")
        })
        e.$on("clickTest2",()=>{
            alert("clickTest2")
        })
        //html部分声明1个按钮，进行事件测试
        document.getElementById("btn").onclick = function () {
            e.$emit("clickTest1")
        }

三、总结

    设计模式是前辈对代码实现的最佳实践，我们可以站在巨人的肩膀不断前行！