北京网站建设qq群,微信营销软件收费排行榜,wordpress 博客统计,母婴类网站怎么建设本文作者为 360 奇舞团前端开发工程师 概述 在日常开发中#xff0c;开发人员经常使用设计模式来解决软件设计中的问题。其中#xff0c;观察者模式是一种常用的模式#xff0c;它可以帮助开发人员更好地处理对象之间的通信。在 JavaScript 中#xff0c;观察者模式的应用非… 本文作者为 360 奇舞团前端开发工程师 概述 在日常开发中开发人员经常使用设计模式来解决软件设计中的问题。其中观察者模式是一种常用的模式它可以帮助开发人员更好地处理对象之间的通信。在 JavaScript 中观察者模式的应用非常广泛可以用于实现事件处理、数据绑定等功能。本文将介绍观察者模式的基本概念和实现方式。 什么是观察者模式 观察者模式是一种行为型设计模式它定义了一种一对多的依赖关系让多个观察者对象observer同时监听某一个主题对象subject。当主题对象发生变化时它会自动通知所有的观察者对象使它们能够及时更新自己的状态。 观察者模式的优点在于它可以实现对象之间的松耦合使得 Subject 和 Observer 可以独立地变化而不会相互影响。它还可以提高代码的复用性和可维护性使得代码更加清晰和易于理解。 事件观察者 该模式的视图如下所示 EventObserver
│
├── subscribe: 添加新的可观察事件
│
├── unsubscribe: 移除可观察事件
|
└── broadcast: 执行带有绑定数据的所有事件 首先要执行初始化EventObserver操作 class EventObserver {constructor() {this.observers [];}
} 从观察到的事件的空列表开始并对每个新实例执行此操作。 订阅方法 要添加新事件请执行以下操作 subscribe(fn) {this.observers.push(fn);
} 获取观察到的事件列表并将新项目推送到数组中事件列表是回调函数列表。 要测试这个方法请执行以下操作 const fn () {};observer.subscribe(fn);// Assert
assert.strictEqual(observer.observers.length, 1); 取消订阅方法 要删除事件请执行以下操作 unsubscribe(fn) {this.observers this.observers.filter((subscriber) subscriber ! fn);
} 从列表中过滤掉与回调函数匹配的内容。如果没有匹配回调将保留在列表中过滤器返回一个新列表并重新分配观察者列表。 要测试这个方法请执行以下操作 const observer new EventObserver();
const fn () {};observer.subscribe(fn);observer.unsubscribe(fn);// Assert
assert.strictEqual(observer.observers.length, 0); 回调必须与列表中的相同函数匹配如果存在匹配项取消订阅方法会将其从列表中删除。 广播法 要调用所有事件请执行以下操作 broadcast(data) {this.observers.forEach((subscriber) subscriber(data));
} 这会遍历观察到的事件列表并执行所有回调。这样你就可以获得与订阅事件必要的一对多关系传入data是回调数据绑定的参数。 要测试这个方法请执行以下操作 const observer new EventObserver();let subscriberHasBeenCalled false;
const fn (data) subscriberHasBeenCalled data;observer.subscribe(fn);observer.broadcast(true);// Assert
assert(subscriberHasBeenCalled); 使用 let 而不是 const 这样我们就可以更改变量的值这使得变量可变然后允许我在回调内部重新分配它的值。let 在代码中会向其他程序员发送一个信号表明该变量在某个时刻正在发生变化这样就增加了 JavaScript 代码的可读性和清晰度。 好了我们已经学会了一个简单的观者模式在 javaScript 中的实现。 总结 这篇主要简单介绍了观察者模式和其简单的实现设计模式还有很多种例如单例模式、策略模式、工厂模式等我们的核心目的是要学习其思想而不是死记硬背每一种模式的实现方式。只有理解了设计模式的思想才能在各种业务场景中灵活地应用它们。 参考链接 https://www.digitalocean.com/community/tutorial-series/javascript-design-patterns https://developer.mozilla.org/zh-CN/docs/learn/JavaScript https://zhuanlan.zhihu.com/p/77275289 - END - 关于奇舞团 奇舞团是 360 集团最大的大前端团队代表集团参与 W3C 和 ECMA 会员TC39工作。奇舞团非常重视人才培养有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
