js-设计模式、观察者模式

最新推荐文章于 2024-10-30 15:39:15 发布

原创最新推荐文章于 2024-10-30 15:39:15 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解了观察者模式，一种允许自定义事件绑定多个函数的设计模式。通过具体代码实例，展示了如何创建和触发自定义事件，使绑定的函数得以执行。这种模式常用于实现事件驱动的系统。

设计模式别名观察者模式、订阅模式，我也不知道为啥叫的这么别扭。

总而言之，他就是自定义一个事件绑定多个函数，当我调用这个自定义事件的时候，他会执行他所对应的函数

如一个自定义事件对应三个函数，当我调用这个自定义事件的时候，他会执行这三个函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.观察者模式就是自定义事件，使用addEvent和emit
        jc = {
            // 存事件名称，和要执行的函数数组
            // 如addList:{"事件名称":["fn1","fn2"]},
            addList: {

            },
            //传进来事件名称，执行绑定的函数
            addEvent: function (eventName, eventFn) {
                // 判断addList中事件名称对应的函数是不是空
                if (this.addList[eventName] == undefined) {
                    // 为空让他增加自定义事件和对应的函数，
                    this.addList[eventName] = []
                }
                // 把函数加到addList[eventName]数组中去
                this.addList[eventName].push(eventFn)
            },
            // 此处是执行函数,要将addList[eventName]的函数循环出来,message是函数要传进来值
            emit: function (eventName, msg) {
                this.addList[eventName].forEach(function (item) {
                    item(msg)
                })
            },
            cc:function(){
                console.log(this.addList)
            } 
        }
        // 注意这里函数传的值要是和emit中的msg相同，原因
        // 1.执行jc.addEvent,他会将这个函数添加到addList中去变成 addList{"swww",[function fn1(msg)]} 
        jc.addEvent("swww", function fn1(msg) {
            console.log(msg)
            console.log("自定义事件1")

        })
        jc.addEvent("swww", function fn2(msg) {
            console.log(msg)
            console.log("自定义事件2")

        })


        jc.emit("swww", "这是我自定的函数")
    </script>
</body>

</html>