发布订阅者模式（详细比喻）

简要

---

在学习这篇文章中，你可以学到发布订阅者模式🎠是什么？怎么实现发布订阅者模式🎫？

预备基础：
javascript🧵

---

一：🎊了解发布订阅者模式👔

什么是发布订阅者模式🧶？
例：你去买货断货了，你要跟老板预定货物，你要写下名字还有你的货物名称，当到货了老板会给你打电话，这就是发布订阅者模式。

老板：发布订阅者。🎐

你：订阅者。🎑

订阅者将信息填写到发布者的缓存列表中（电话薄）。
当发布者到货之后就会遍历缓存列表依次通知订阅者。

---

二：👢实现发布订阅者模式🥿

2.1：定义一个发布者

创建一个 SyncHook 类，其中有 2 个方法：
tap：缓存列表（电话薄）
call：遍历缓存列表（电话薄）

class SyncHook {
	constructor() {
		
	}
}

let hook = new SyncHook();

---

2.2：🎩给发布者添加功能💋

创建一个 SyncHook 类，其中有 2 个方法 1 个属性：
tap：缓存列表（电话薄）
call：遍历缓存列表（电话薄）

tasks：缓存列表（电话薄）

class SyncHook {
	constructor() {
		this.tasks = [];
	}
	tap(tag, fn) {
		this.tasks.push(fn);
	}
	call(...args) {
		this.tasks.forEach(function (task) {
			task(...args);
		});
	}	
}

let hook = new SyncHook();

---

2.3：👠使用发布订阅者模式🛍

需求： 张三、李四去车店买了一辆兰博基尼，张三、李四预定(tap)了一辆 兰博基尼 价格 999999999 车店里没有货了，要等经理到货后通知(call)他们。

class SyncHook {
	constructor() {
		this.tasks = [];
	}
	tap(tag, fn) {
		this.tasks.push(fn);
	}
	call(...args) {
		this.tasks.forEach(function (task) {
			task(...args);
		});
	}	
}

let hook = new SyncHook();
hook.tap("张三", function (name, price) {
	console.log(name, price); // 兰博基尼 999999999
})

hook.tap("李四", function (name, price) {
	console.log(name, price); // 兰博基尼 999999999
})

hook.call("兰博基尼", 999999999);

---

2.4：🎪发布订阅者优化🖼

对发布订阅者模式优化参数进行校验
新增了 1 个属性:
| arg |
校验规则：
在 SyncHook 中传入一个数组这个数组就代表着能传递几个参数。
少于：报错
多于：截取数组个数对应的参数

class SyncHook {
	constructor(arg) {
		this.tasks = [];
		this.arg = arg;
	}
	tap(tag, fn) {
		this.tasks.push(fn);
	}
	call(...args) {
		if (args.length < this.arg.length) {
			throw new Error("参数个数不对")
		}
		args = args.slice(0, this.arg.length);
		this.tasks.forEach(function (task) {
			task(...args);
		});
	}	
}

let hook = new SyncHook([name, price]);
hook.tap("张三", function (name, price) {
	console.log(name, price); // 兰博基尼 999999999
})

hook.tap("李四", function (name, price) {
	console.log(name, price); // 兰博基尼 999999999
})

hook.call("兰博基尼", 999999999);

---

GOOD-BYE🎭