前端设计模式-发布订阅模式

最新推荐文章于 2022-04-26 21:59:11 发布

boboj1

最新推荐文章于 2022-04-26 21:59:11 发布

阅读量118

点赞数 3

分类专栏：设计模式文章标签：设计模式 js

本文链接：https://blog.csdn.net/Wind_AN/article/details/117603480

版权

设计模式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            有一个第三方观察者，我让第三方观察者订阅一些消息，
            每个消息都有一个或者多个方法，
            当该消息发生时，执行该消息中的方法
        */

        //创建一个第三方观察者构造函数
       class Observer {
           constructor () {
               this.message = {}
           }
           //向消息队列里添加内容
           on(type,fn) {
               //如果消息没有注册过
               if(!this.message[type]){
                   this.message[type] = [];
               }
               this.message[type].push(fn);
           }
           //删除消息队列里的内容
           off(type,fn) {
                if(!fn) {
                    delete this.message[type];
                    return;
                }
                if(!this.message[type]) return;
                this.message[type] = this.message[type].filter(item => item !== fn);
           }
           //触发消息队列
           trigger(type) {
                if(!this.message[type]) return;
                this.message[type].forEach(item => {
                    item();
                })
           }
       }
       const person1 = new Observer();
       person1.on("情人节",A);
       person1.on("情人节",B);
       person1.on("端午节",C);
       person1.on("端午节",D);
       function A() {console.log("买玫瑰花");}
       function B() {console.log("买口红");}
       function C() {console.log("吃粽子");}
       function D() {console.log("赛龙舟");}
    </script>
</body>
</html>

console.log(person1);

在这里插入图片描述

person1.trigger("情人节");

在这里插入图片描述

person1.trigger("端午节");

在这里插入图片描述

boboj1

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端设计模式-发布订阅模式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫