从零开始带你手写一个“发布-订阅者模式“ ，保姆级教学

最新推荐文章于 2024-02-22 14:19:29 发布
置顶 最新推荐文章于 2024-02-22 14:19:29 发布
阅读量3.1k 收藏 62
点赞数 17
分类专栏： JavaScript 文章标签： 前端 javascript 设计模式 发布订阅者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45844049/article/details/122259675
版权

前言

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

  • 订阅者（Subscriber）把自己想订阅的事件 注册（Subscribe）到调度中心（Event Channel）;
  • 当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由 调度中心 统一调度（Fire Event）订阅者注册到调度中心的处理代码。

◾ 例子

比如我们很喜欢看某个公众号号的文章，但是我们不知道什么时候发布新文章，要不定时的去翻阅；这时候，我们可以关注该公众号，当有文章推送时，会有消息及时通知我们文章更新了。

上面一个看似简单的操作，其实是一个典型的发布订阅模式，公众号属于发布者，用户属于订阅者；用户将订阅公众号的事件注册到调度中心，公众号作为发布者，当有新文章发布时，公众号发布该事件到调度中心，调度中心会及时发消息告知用户。

◾ 发布/订阅模式的优点是对象之间解耦，异步编程中，可以更松耦合的代码编写；缺点是创建订阅者本身要消耗一定的时间和内存，虽然可以弱化对象之间的联系，多个发布者和订阅者嵌套一起的时候，程序难以跟踪维护。

手写实现发布-订阅者模式

整体的发布-订阅者模式实现思路如下：

  • 创建一个类 class
  • 在这个类里创建一个缓存列表(调度中心)
  • on 方法 - 用来把函数fn添加到缓存列表(订阅者注册事件到调度中心)
  • emit 方法 - 取到event事件类型，根据event值去执行对应缓存列表中的函数(发布者发布事件到调度中心，调度中心处理代码)
  • off 方法 - 可以根据event事件类型取消订阅(取消订阅)

接下来我们根据上面的思路，开始手写发布-订阅者模式 👇

1. 创建一个 Observer 类

我们先创建一个 Ovserver 类：

+ class Observer {
+     
+ }

在 Observer 类里，需要添加一个构造函数：

class Observer {
+   constructor(){
+       
+   }
}

2. 添加三个核心方法

还需要添加三个方法，也就是我们前面讲到的on、emit和off方法，为了让这个方法长得更像 Vue，我们在这几个方法前面都加上$，即：

  • 向消息队列添加内容 $on
  • 删除消息队列里的内容 $off
  • 触发消息队列里的内容 $emit
class Observer {
    constructor() {

    }
+   // 向消息队列添加内容 `$on`
+   $on(){}
+   // 删除消息队列里的内容 `$off`
+   $off(){}
+   // 触发消息队列里的内容 `$emit`
+   $emit(){}
}

方法具体的内容我们放一放，先来创建一个订阅者(发布者)，

使用构造函数创建一个实例：

class Observer {
    constructor() {

    }
    // 向消息队列添加内容 `$on`
    $on(){}
    // 删除消息队列里的内容 `$off`
    $off(){}
    // 触发消息队列里的内容 `$emit`
    $emit(){}
}

+ // 使用构造函数创建一个实例
+ const person1 = new Observer()

接着，我们向这个person1委托一些内容，也就是说调用person1的$ON方法：

class Observer {
    constructor() {

    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

+ // 向这个`person1`委托一些内容，调用`person1 `的`$ON`方法
+ person1.$on()

既然要委托一些内容，那 事件名 就必不可少，事件触发的时候也需要一个 回调函数

  • 事件名
  • 回调函数

举个例子，我们写几个事件，比如：

class Observer {
    constructor() {

    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

// 向这个`person1`委托一些内容，调用`person1 `的`$ON`方法
person1.$on()

+ function handlerA() {
+     console.log('handlerA');
+ }
+ 
+ function handlerB() {
+     console.log('handlerB');
+ }
+ 
+ function handlerC() {
+     console.log('handlerC');
}

我们现在拜托 person1 监听一下 买红宝石 ，红宝石到了之后，执行回调函数 handlerA 和 handlerB，就可以这样写:

class Observer {
    constructor() {

    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

// 向这个`person1`委托一些内容，调用`person1 `的`$ON`方法
+ person1.$on('买红宝石', handlerA)
+ person1.$on('买红宝石', handlerB)

function handlerA() {
    console.log('handlerA');
}

function handlerB() {
    console.log('handlerB');
}

function handlerC() {
    console.log('handlerC');
}

再拜托 person1 监听一下 买奶茶 ，奶茶到了之后，执行回调函数 handlerC :

class Observer {
    constructor() {

    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

// 向这个`person1`委托一些内容，调用`person1 `的`$ON`方法
person1.$on('买红宝石', handlerA)
person1.$on('买红宝石', handlerB)

+ person1.$on('买奶茶', handlerC)


function handlerA() {
    console.log('handlerA');
}

function handlerB() {
    console.log('handlerB');
}

function handlerC() {
    console.log('handlerC');
}

3. 设置缓存列表

到这里我们就需要前面讲到的 缓存列表（消息队列），也就是调度中心了。

给Observer类添加 缓存列表：

class Observer {
    constructor() {
+       this.message = {} // 消息队列
    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

这个缓存列表 message 对象的功能如下：

向 person1 委托一个buy类型的内容，完成之后执行回调函数 handlerA 和 handlerB

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

+ person1.$on('buy',handlerA);
+ person1.$on('buy',handlerB);

function handlerA() {
    console.log('handlerA');
}

function handlerB() {
    console.log('handlerB');
}

function handlerC() {
    console.log('handlerC');
}

我们希望通过$on向消息队列添加上面内容后，就相当对给message对象添加了一个buy属性，这个属性值为[handlerA, handlerB]，相当于下面的效果：

class Observer {
    constructor() {
        this.message = {
+           buy: [handlerA, handlerB]
        }
    }
    // 向消息队列添加内容 `$on`
    $on() {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

需求明确后，下面着手 写 $on 函数 👇👇👇

4. 实现 $on 方法

回顾一行代码：

person1.$on('buy',handlerA);

很明显我们给$on方法传入了两个参数：

  • type：事件名 (事件类型)
  • callback：回调函数
class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

+   /**
+    * `$on` 向消息队列添加内容 
+    * @param {*} type 事件名 (事件类型)
+    * @param {*} callback 回调函数
+    */
+   $on(type, callback) {}
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

// 使用构造函数创建一个实例
const person1 = new Observer();

person1.$on('buy', handlerA);
person1.$on('buy', handlerB);

我们初步设想一下如何向消息队列添加内容，消息队列是一个对象，可以通过下面的方法添加事件内容：

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
+       this.message[type] = callback;
    }
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

但通过前文我们知道消息队列中每个属性值都是 数组：

this.message = {
    buy: [handlerA, handlerB]
}

即每个事件类型对应多个消息 (回调函数)，这样的话我们就要为每个事件类型创建一个数组，具体写法：

  1. 先判断有没有这个属性（事件类型）
  2. 如果没有这个属性，就初始化一个空的数组
  3. 如果有这个属性，就往他的后面push一个新的 callback

代码实现如下：

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
+       // 判断有没有这个属性（事件类型）
+       if (!this.message[type]) {
+           // 如果没有这个属性，就初始化一个空的数组
+           this.message[type] = [];
+       }
+       // 如果有这个属性，就往他的后面push一个新的callback
+       this.message[type].push(callback)
    }
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

$on 的代码实现如上所示，我们加上用例并引入到一个html文件中测试一下：

Observe.js

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
        // 判断有没有这个属性（事件类型）
        if (!this.message[type]) {
            // 如果没有这个属性，就初始化一个空的数组
            this.message[type] = [];
        }
        // 如果有这个属性，就往他的后面push一个新的callback
        this.message[type].push(callback)
    }
    // 删除消息队列里的内容 `$off`
    $off() {}
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

function handlerA() {
    console.log('handlerA');
}
function handlerB() {
    console.log('handlerB');
}
function handlerC() {
    console.log('handlerC');
}

// 使用构造函数创建一个实例
const person1 = new Observer();

person1.$on('buy', handlerA);
person1.$on('buy', handlerB);

console.log('person1 :>> ', person1);

Oberver.html

<!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>
    <!-- 引入Observe.js文件 -->
    <script src="../JS/Observer.js"></script>
</body>
</html>

输出结果：
在这里插入图片描述
打印出的 person1 是 Oberver 类型的，里面有一个message，也就是咱定义的消息队列；这个message里有我们添加的buy类型的事件，这个buy事件有两个消息：[handlerA，handlerB]，测试通过 👏👏👏

接下来，我们来实现 $off 方法

5. 实现 $off 方法

$off 方法用来删除消息队列里的内容

$off 方法有两种写法：

  1. person1.$off("buy") - 删除整个buy事件类型
  2. person1.$off("buy",handlerA) - 只删除handlerA消息，保留buy事件列表里的其他消息

和$on方法一样，$off方法也需要type和callback这两个方法：

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
        // 判断有没有这个属性（事件类型）
        if (!this.message[type]) {
            // 如果没有这个属性，就初始化一个空的数组
            this.message[type] = [];
        }
        // 如果有这个属性，就往他的后面push一个新的callback
        this.message[type].push(callback)
    }

+   /**
+    * $off 删除消息队列里的内容
+    * @param {*} type 事件名 (事件类型)
+    * @param {*} callback 回调函数
+    */
+   $off(type, callback) {}
    
    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

$off方法的实现步骤如下：

  • 判断是否有订阅，即消息队列里是否有type这个类型的事件，没有的话就直接return
  • 判断是否有fn这个参数
    • 没有fn就删掉整个事件
    • 有fn就仅仅删掉fn这个消息

代码实现如下：

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
        // 判断有没有这个属性（事件类型）
        if (!this.message[type]) {
            // 如果没有这个属性，就初始化一个空的数组
            this.message[type] = [];
        }
        // 如果有这个属性，就往他的后面push一个新的callback
        this.message[type].push(callback);
    }

    /**
     * $off 删除消息队列里的内容
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $off(type, callback) {
+       // 判断是否有订阅，即消息队列里是否有type这个类型的事件，没有的话就直接return
+       if (!this.message[type]) return;
+       // 判断是否有callback这个参数
+       if (!callback) {
+           // 如果没有callback,就删掉整个事件ß
+           this.message[type] = undefined;
+       }
+       // 如果有callback,就仅仅删掉callback这个消息(过滤掉这个消息方法)
+       this.message[type] = this.message[type].filter((item) => item !== callback);
    }

    // 触发消息队列里的内容 `$emit`
    $emit() {}
}

以上就是$off的实现，我们先来测试一下：

class Observer {
	...
}

function handlerA() {
    console.log('handlerA');
}
function handlerB() {
    console.log('handlerB');
}
function handlerC() {
    console.log('handlerC');
}

// 使用构造函数创建一个实例
const person1 = new Observer();

person1.$on('buy', handlerA);
person1.$on('buy', handlerB);
person1.$on('buy', handlerC);

console.log('person1 :>> ', person1);

输出结果：
在这里插入图片描述
● 测试删除单个消息，使用$off 删除 handlerC 消息

class Observer {
	...
}

function handlerA() {
    console.log('handlerA');
}
function handlerB() {
    console.log('handlerB');
}
function handlerC() {
    console.log('handlerC');
}

// 使用构造函数创建一个实例
const person1 = new Observer();

person1.$on('buy', handlerA);
person1.$on('buy', handlerB);
person1.$on('buy', handlerC);

console.log('person1 :>> ', person1);

+ // 删除 handlerC 消息
+ person1.$off('buy',handlerC);

+ console.log('person1 :>> ', person1);

输出结果：
在这里插入图片描述
测试通过 🥳🥳🥳

● 测试删除整个事件类型，使用$off 删除整个 buy 事件

class Observer {
	...
}

function handlerA() {
    console.log('handlerA');
}
function handlerB() {
    console.log('handlerB');
}
function handlerC() {
    console.log('handlerC');
}

// 使用构造函数创建一个实例
const person1 = new Observer();

person1.$on('buy', handlerA);
person1.$on('buy', handlerB);
person1.$on('buy', handlerC);

console.log('person1 :>> ', person1);

// 删除 handlerC 消息
person1.$off('buy',handlerC);

console.log('person1 :>> ', person1);

+ // 删除 buy 事件
+ person1.$off('buy');

+ console.log('person1 :>> ', person1);

输出结果：
在这里插入图片描述
Perfect！！！测试通过 ✅

这样以来 $off 的两个功能我们就已经成功实现 👏👏👏

● 关于 $off 的实现，这里讲一个小细节 👇

javascript 删除对象的某个属性 有两种方法：

  1. delete 操作符
  2. obj.key = undefined; (等同于obj[key] = undefined;)

这两种方法的区别：

1. delete 操作符会从某个对象上移除指定属性，但它的工作量比其“替代”设置也就是 object[key] = undefined 多的多的多。

并且该方法有诸多限制，比如，以下情况需要重点考虑：

  • 如果你试图删除的属性不存在，那么delete将不会起任何作用，但仍会返回true

  • 如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）

  • 任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。

    • 这样的话，delete操作不能删除任何在全局作用域中的函数（无论这个函数是来自于函数声明或函数表达式）
    • 除了在全局作用域中的函数不能被删除，在对象(object)中的函数是能够用delete操作删除的。

  • 任何用let或const 声明的属性不能够从它被声明的作用域中删除。

  • 不可设置的(Non-configurable)属性不能被移除。这意味着像Math, Array， Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除。

2. obj[key] = undefined; 这个选择不是这个问题的正确答案，因为只是把某个属性替换为undefined，属性本身还在。但是，如果你小心使用它，你可以大大加快一些算法。

好了，回到正题 🙌

接下来我们开始实现第三个方法 $emit 🧗‍♀️

6. 实现 $emit 方法

$emit 用来触发消息队列里的内容：

  • 该方法需要传入一个 type 参数，用来确定触发哪一个事件；

  • 主要流程就是对这个type事件做一个轮询 (for循环)，挨个执行每一个消息的回调函数callback就👌了。

具体代码实现如下：

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
        // 判断有没有这个属性（事件类型）
        if (!this.message[type]) {
            // 如果没有这个属性，就初始化一个空的数组
            this.message[type] = [];
        }
        // 如果有这个属性，就往他的后面push一个新的callback
        this.message[type].push(callback);
    }

    /**
     * $off 删除消息队列里的内容
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $off(type, callback) {
        // 判断是否有订阅，即消息队列里是否有type这个类型的事件，没有的话就直接return
        if (!this.message[type]) return;
        // 判断是否有callback这个参数
        if (!callback) {
            // 如果没有callback,就删掉整个事件
            this.message[type] = undefined;
            return;
        }
        // 如果有callback,就仅仅删掉callback这个消息(过滤掉这个消息方法)
        this.message[type] = this.message[type].filter((item) => item !== callback);
    }

+   /**
+    * $emit 触发消息队列里的内容
+    * @param {*} type 事件名 (事件类型)
+    */
+   $emit(type) {
+       // 判断是否有订阅
+       if(!this.message[type]) return;
+       // 如果有订阅，就对这个`type`事件做一个轮询 (for循环)
+       this.message[type].forEach(item => {
+           // 挨个执行每一个消息的回调函数callback
+           item()
+       });
+   }
}

打完收工🏌️‍♀️

来测试一下吧～

class Observer {
	...
}

function handlerA() {
    console.log('buy handlerA');
}
function handlerB() {
    console.log('buy handlerB');
}
function handlerC() {
    console.log('buy handlerC');
}

// 使用构造函数创建一个实例
const person1 = new Observer();

+ person1.$on('buy', handlerA);
+ person1.$on('buy', handlerB);
+ person1.$on('buy', handlerC);

console.log('person1 :>> ', person1);

+ // 触发 buy 事件
+ person1.$emit('buy')

输出结果：
在这里插入图片描述
测试通过 👏👏👏
在这里插入图片描述

完整代码

本篇文章实现了最简单的发布订阅者模式，他的核心内容只有四个：

  1. 缓存列表 message
  2. 向消息队列添加内容 $on
  3. 删除消息队列里的内容 $off
  4. 触发消息队列里的内容 $emit

发布订阅者模式完整代码实现：

完整版的代码较长，这里看着如果不方便的可以去我的GitHub上看，我专门维护了一个 前端 BLOG 的仓库：https://github.com/yuanyuanbyte/Blog

class Observer {
    constructor() {
        this.message = {} // 消息队列
    }

    /**
     * `$on` 向消息队列添加内容 
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $on(type, callback) {
        // 判断有没有这个属性（事件类型）
        if (!this.message[type]) {
            // 如果没有这个属性，就初始化一个空的数组
            this.message[type] = [];
        }
        // 如果有这个属性，就往他的后面push一个新的callback
        this.message[type].push(callback);
    }

    /**
     * $off 删除消息队列里的内容
     * @param {*} type 事件名 (事件类型)
     * @param {*} callback 回调函数
     */
    $off(type, callback) {
        // 判断是否有订阅，即消息队列里是否有type这个类型的事件，没有的话就直接return
        if (!this.message[type]) return;
        // 判断是否有callback这个参数
        if (!callback) {
            // 如果没有callback,就删掉整个事件
            this.message[type] = undefined;
            return;
        }
        // 如果有callback,就仅仅删掉callback这个消息(过滤掉这个消息方法)
        this.message[type] = this.message[type].filter((item) => item !== callback);
    }

    /**
     * $emit 触发消息队列里的内容
     * @param {*} type 事件名 (事件类型)
     */
    $emit(type) {
        // 判断是否有订阅
        if(!this.message[type]) return;
        // 如果有订阅，就对这个`type`事件做一个轮询 (for循环)
        this.message[type].forEach(item => {
            // 挨个执行每一个消息的回调函数callback
            item()
        });
    }
}

❤️ 结尾

如果这篇文章 对你的学习 有所 帮助，欢迎 点赞 👍 收藏 ⭐ 留言 📝 ，你的支持 是我 创作分享 的 动力！

学习过程中如果有疑问，点击这里，可以获得我的联系方式，与我交流~

关注公众号「前端圆圆」，第一时间获取文章更新。

更多更全更详细 的 优质内容， 猛戳这里查看

在这里插入图片描述

圆圆01
关注
  • 17
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
前言 现在前端面试Vue中都会问到响应式原理以及如何实现的，如果你还只是简单回答通过Object.defineProperty（）来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定，解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc（vm）框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入的元素（输入，textare等）添加了（输入）事件，来动态修改模型和视图，并没有多高深，所以无需太过介怀是实现的单向或双向绑定。 实现数据绑定的做法有大致如下几种： 发布者-订阅者模式（backbone.js） 脏值检查(angular.js) 数据劫持(Vue.js) 发布者-订阅者模式 一般是通过sub，pub的方式来实现数据和试图的绑定坚决听，更细数据方法通常做法是vm.set（'property'，va
请手写一个发布-订阅的模式
fury的博客
11-23 159
在JavaScript开发中，我们一般用事件模型来替代传统的发布-订阅模式。等等都有应用，也是前端面试比较火热的考点之一，接下来给大家详细介绍下。之一，它在前端很多地方都有应用，比如。发布-订阅模式定义了对象间的一种。代码不多，所以直接上完整代码。
【DDD】学习笔记-发布者—订阅者模式
最新发布
xqdd的专栏
02-22 1251
订阅者模式
handwriting:手写系列
05-05
手写系列 节流防抖 防抖是虽然事件持续触发，但只有等事件停止触发后 n 秒才执行函数，节流是持续触发的时候，每 n 秒执行一次函数 节流 防抖 设计模式 发布与订阅
blog:记录精品项目，日常总结，手写api，源码学习，常用工具
03-23
精品项目 基于Nodejs + eggjs + Mongodb编写的内容管理系统。 GitHub上有趣，入门级的开源项目 常用工具，优秀导航，创意资源，绿色软件，优秀博客 发现新网站，就像发现新大陆 无广告，无需下载app，无需登陆注册，打开网页，即可浏览全网景点〜 日常总结 常用工具 【录频-标注】 【脑图，流程图，在线抠图，在线视频剪辑】 【在线配色方案】 【图片素材】 | 【chrome上网助手】 【在线生成GitHub README.md目录】 手写api 手写发布订阅模式 模拟new操作符 模拟实现Array.prototype.reduce 节流（节流） 防抖 承诺 箭头函数 用函数实现useEffect功能 片断阳离子化 斑点去重 类数组转化为数组 深拷贝 Array.prototype.filter（） Array.prototype.map（
js-Promise：手写系列手写promise，vue ..
02-21
js-Promise 手写一个简单的承诺无极初级核心发布订阅模式
一文讲解发布者订阅者模式与观察者模式
认定的总要想办法去完成。
06-28 2733
 观察者模式：当对象之间存在一对多的依赖关系时，其中一个对象的状态发生改变，所有依赖它的对象都会收到通知，这就是观察者模式。  发布者订阅者模式：基于一个事件通道，希望接收通知的对象Subscriber 通过自定义事件订阅主题，被激活事件的对象 Publisher 通过发布主题事件的方式通知订阅者该主题的 Subscriber 对象。  观察者模式是，当被观察者的数据发生变化时，调用被观察者的notify方法，去通知所有观察者执行update方法进行更新。对于发布者订阅者模式，首先发布者与订阅者互相并不知道
观察者(订阅)模式
Filwaod
11-29 1518
原本目标对象在状态发生改变的时候，需要直接调用所有的观察者对象，但是抽象出观察者接口以后，目标和观察者就只是在抽象层面上耦合了，也就是说目标只是知道观察者接口，并不知道具体的观察者的类，从而实现目标类和具体的观察者类之间解耦。如果在更改一个对象的时候，需要同时连带改变其他的对象，而且不知道究竟应该有多少对象需要被连带改变，这种情况可以选用观察者模式，被更改的那一个对象很明显就相当于是目标对象，而需要连带修改的多个其他对象，就作为多个观察者对象了。里面维护了观察者对象，以及注册、移除观察者，通知观察者等。
手写实现---发布订阅模式
楠姐的博客
02-21 230
发布订阅模式
前端JavaScript之手写实现：发布订阅模式
博客简介
04-11 587
发布订阅模式：发布订阅模式是软件开发者常见的一种设计模式。该模式中存在一个或多个发布者，一个或多个订阅者，当发布者发布消息时，参与订阅的订阅者就会收到相应的消息通知。
发布-订阅者模式
qq_40994735的博客
09-19 2736
一、前言 学习vue的时候，对深入响应式原理模模糊糊的，现在简单一下理解。 二、简述VUE响应原理。 vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter， 在数据变动时发布消息给订阅者，触发相应的监听回调。 三、什么是发布-订阅者模式 简单理解：比如一个商店，会员粉丝经常要询问有什么活动，员工每次都要做一遍解答，工作重复又麻烦，但是把所有会员的邮箱收集成名单，有活动时统一发送邮件。会员就是订阅者，商店就是发布
手写RocketMq详细操作手册
12-10
RocketMq操作手册：针对入门初中级别。 消息队列 RocketMQ 是阿里巴巴集团基于高可用分布式集群技术，自主研发的云正式商用的专业消息中间件，既可为分布式应用系统提供异步解耦 和削峰填谷的能力，同时也具备互联网应用所需的海量消息堆积、高吞吐、可靠重试等特性，是阿里巴巴双 11 使用的核心产品。 RocketMQ 的设计基于主题的发布与订阅模式，其核心功能包括消息发送、消息存储(Broker)、消息消费，整体设计追求简单与性能第一。 1. NameServer 设计及其简单，RocketMQ 摈弃了业界常用的 Zookeeper 充当消息管理的“注册中心”，而是使用自主研发的 NameServer 来实现各 种元数据的管理（Topic 路由信息等） 2. 高效的 I/O 存储，RocketMQ 追求消息发送的高吞吐量，RocketMQ 的消息存储设计成文件组的概念，组内单个文件固定大小，引入了内存映射机 制，所有主题的消息存储基于顺序读写，极大提高消息写性能，同时为了兼顾消息消费与消息查找，引入消息消费队列文件与索引文件
从零开始手写 dubbo rpc 框架-11-fail失败策略.docx
10-22
。。。
从零开始手写 dubbo rpc 框架-11-fail失败策略.pdf
10-22
。。。
从零开始手写 dubbo rpc 框架-12-generic泛化调用.docx
10-22
。。。
从零开始手写 dubbo rpc 框架-12-generic泛化调用.pdf
10-22
。。。
如何从零开始利用js手写一个Promise库详解
10-18
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关...
HTML点击按钮button跳转页面的几种实现方法
热门推荐
圆圆的 JavaScript 博客
11-20 14万+
其实我比较喜欢第一种方法 <button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button> 方法一：在button标签中加上onclick属性，赋值为Javascript <input type="button" name="regi...
vscode使用chrome调试报错‘无法访问您的文件‘或者‘localhost 拒绝了我们的连接请求。‘
圆圆的 JavaScript 博客
11-04 1万+
vscode使用chrome调试报错'无法访问您的文件'或者'localhost 拒绝了我们的连接请求。'
手写JavaScript发布订阅模式
05-18
发布订阅模式又称观察者模式，是一种常见的设计模式，它定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。下面是手写JavaScript发布订阅模式的一种实现方式： ```javascript function PubSub() { this.subscribers = {}; } PubSub.prototype.subscribe = function(event, callback) { if (!this.subscribers[event]) { this.subscribers[event] = []; } this.subscribers[event].push(callback); }; PubSub.prototype.unsubscribe = function(event, callback) { if (!this.subscribers[event]) { return; } var index = this.subscribers[event].indexOf(callback); if (index > -1) { this.subscribers[event].splice(index, 1); } }; PubSub.prototype.publish = function(event, data) { if (!this.subscribers[event]) { return; } this.subscribers[event].forEach(function(callback) { callback(data); }); }; ``` 使用方式如下： ```javascript var pubsub = new PubSub(); function callback1(data) { console.log('callback1:', data); } pubsub.subscribe('event1', callback1); function callback2(data) { console.log('callback2:', data); } pubsub.subscribe('event2', callback2); pubsub.publish('event1', { message: 'hello' }); pubsub.publish('event2', { message: 'world' }); pubsub.unsubscribe('event1', callback1); pubsub.publish('event1', { message: 'hello again' }); ``` 输出结果为： ``` callback1: {message: "hello"} callback2: {message: "world"} ``` 当调用 `publish` 方法时，订阅了该事件的所有回调函数都将被执行，并且可以传递一个数据对象作为参数。调用 `subscribe` 方法注册一个回调函数，当该事件被发布时，该回调函数将被执行。调用 `unsubscribe` 方法取消订阅。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值