观察者模式
定义：他用来定义对象之间一种一对多的依赖关系，当一个对象状态发生改变时，所有依赖他的对象都会得到通知
运用
如果我们使用过 DOM 上的事件函数，那就接触过观察者模式
document.body.addEventListener(
"click",
function () {
console.log("body clicked");
},
false
);
document.body.click(); // 输出：body clicked
这段代码中 body 上添加了一个订阅者，而 document.body.click() 向所有订阅者发送了点击事件～
我们可以随意添加 订阅者 而不会影响 发布者 代码的编写
实现
接下来尝试实现一些自定义事件，通过 listen 监听某个名为 key 的事件，通过 trigger 执行事件回调函数
var saleOffices = {
clientList: [], // 缓存列表，存放订阅者的回调函数
listen: function (key, fn) {
// 增加订阅者
if (!this.clientList[key]) {
// 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
this.clientList[key] = []; // 直接把函数推入数组
}
this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
},
trigger: function () {
// 发布消息
var key = Array.prototype.shift.call(arguments); // 取出消息类型
var fns = this.clientList[key]; // 取出该消息对应的回调函数集合
if (!fns || fns.length === 0) {
// 如果没有订阅该消息，则返回
return false;
}
for (var i = 0, fn; (fn = fns[i++]); ) {
// 依次执行订阅的回调函数
fn.apply(this, arguments); // arguments 是发布消息时带上的参数
}
},
};
// ----- 测试 -----
saleOffices.listen("squareMeter88", function (price) {
// 小明订阅消息
console.log("小明得到价格= " + price);
});
saleOffices.listen("squareMeter100", function (price) {
// 小红订阅消息
console.log("小红价格= " + price);
});
saleOffices.trigger("squareMeter88", 2000000); // 输出：2000000
