一个企业做网站推广的优势,色轮 网站,建设网站江西,网站建设自查报告文章目录 观察者模式运用实现 观察者模式
定义#xff1a;他用来定义对象之间一种一对多的依赖关系#xff0c;当一个对象状态发生改变时#xff0c;所有依赖他的对象都会得到通知
运用
如果我们使用过 DOM 上的事件函数#xff0c;那就接触过观察者模式
document.body… 文章目录 观察者模式运用实现 观察者模式
定义他用来定义对象之间一种一对多的依赖关系当一个对象状态发生改变时所有依赖他的对象都会得到通知
运用
如果我们使用过 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
