龙空技术网

js设计模式之观察者模式

光影少年2J5V 85

前言:

目前同学们对“观察者模式js实现”都比较讲究,小伙伴们都想要学习一些“观察者模式js实现”的相关内容。那么小编在网摘上搜集了一些关于“观察者模式js实现””的相关文章,希望看官们能喜欢,各位老铁们一起来了解一下吧!

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>观察者模式</title></head><body><script>    class Event{        constructor() {}        //事件容器,可以是一个也可以是多个        handlers ={}        //事件添加方法、事件名称,事件方法        addEventListener(type, handler) {            if (!(typein this.handlers)) {                this.handlers[type] =[];            }            //将事件存入            this.handlers[type].push(handler)        }        //触发事件        dispatchEvent(type, ...params) {            if (!(typein this.handlers)) {                return new Error("未注册该事件")            }            //触发            this.handlers[type].forEach(item =>{                item(...params);            })        }        //移除事件        removeEventListener(type, handler) {            if (!(typein this.handlers)) {                return new Error("无效事件")            }            if (!handler) {                //delete删除对象元素                delete this.handlers[type]            }else {                const idx =this.handlers[type].findIndex(item => item === handler)                if (idx===undefined){                    return new Error("无效事件")                }                this.handlers[type].splice(idx, 1)                if (this.handlers[type].length ===0) {                    delete this.handlers[type]                }            }        }    }    //创建事件对象    const event =new Event();    //定义一个load事件    function load(params) {        console.log("load", params)}    //添加事件    event.addEventListener("load", load)    function load2(params) {        console.log("load2", params)}    event.addEventListener("load", load2)    //触发    event.dispatchEvent("load", "load事件触发")    //删除    event.removeEventListener("load", load)</script></body></html>

标签: #观察者模式js实现