• 【前端设计模式】之观察者模式


    观察者模式特性

    观察者模式是一种行为型设计模式,它定义了一种一对多的依赖关系,当一个对象的状态发生改变时,其依赖者(观察者)会自动收到通知并更新。观察者模式的主要特性包括:

    1. 主题(Subject):也称为被观察者或发布者,负责维护一组观察者对象,并在状态变化时通知观察者。
    2. 观察者(Observer):也称为订阅者或监听器,负责接收主题的通知并进行相应的处理。
    3. 通知机制:主题在状态变化时会主动通知所有注册的观察者对象。 最佳实践及代码示例: 在前端开发中,观察者模式常用于以下场景:
    4. 事件处理:通过事件机制实现了观察者模式。DOM事件、自定义事件等都是基于观察者模式实现的。
    5. 数据绑定:当数据发生变化时,自动更新相关视图。

    应用示例

    1. // 定义主题对象
    2. class Subject {
    3. constructor() {
    4. this.observers = [];
    5. }
    6. addObserver(observer) {
    7. this.observers.push(observer);
    8. }
    9. removeObserver(observer) {
    10. const index = this.observers.indexOf(observer);
    11. if (index !== -1) {
    12. this.observers.splice(index, 1);
    13. }
    14. }
    15. notify(data) {
    16. this.observers.forEach((observer) => {
    17. observer.update(data);
    18. });
    19. }
    20. }
    21. // 定义观察者对象
    22. class Observer {
    23. update(data) {
    24. console.log(`Received data: ${data}`);
    25. // 处理接收到的数据
    26. }
    27. }
    28. // 使用示例
    29. const subject = new Subject();
    30. const observer1 = new Observer();
    31. const observer2 = new Observer();
    32. subject.addObserver(observer1);
    33. subject.addObserver(observer2);
    34. subject.notify("Hello World"); // 通知所有观察者,输出:Received data: Hello World

    在上述示例中,我们定义了一个主题对象Subject和一个观察者对象Observer。主题对象负责维护一组观察者对象,并在状态变化时通知观察者。观察者对象通过注册到主题对象中,接收到主题的通知后进行相应的处理。

    Vue双向绑定

    Vue源码通过观察者模式实现了双向数据绑定。下面是Vue源码中实现双向绑定的大致代码实现:

    1. 首先,Vue通过Object.defineProperty方法对数据对象进行劫持,将其转化为响应式对象。在这个过程中,Vue会为每个属性创建一个Dep对象,用于收集依赖和通知更新。
    2. 在模板编译阶段,Vue会解析模板中的指令和表达式,并创建对应的指令对象。每个指令对象都会关联一个Watcher对象。
    3. Watcher对象负责订阅数据变化,并在数据变化时执行相应的回调函数。它会将自身添加到相关属性的依赖(Dep)中。
    4. 当数据发生变化时,被劫持的属性会触发相应的setter函数。在这个过程中,属性关联的依赖(Dep)会通知所有订阅者(即相关的Watcher)进行更新。
    5. 更新过程中,订阅者(即相关的Watcher)会执行回调函数,并更新视图。
     
    
    1. // 定义观察者对象
    2. class Watcher {
    3. constructor(vm, key, updateFn) {
    4. this.vm = vm;
    5. this.key = key;
    6. this.updateFn = updateFn;
    7. Dep.target = this;
    8. this.vm[this.key]; // 触发 getter,收集依赖
    9. Dep.target = null;
    10. }
    11. update() {
    12. this.updateFn.call(this.vm, this.vm[this.key]); // 更新视图
    13. }
    14. }
    15. // 定义依赖对象
    16. class Dep {
    17. constructor() {
    18. this.subscribers = [];
    19. }
    20. depend() {
    21. if (Dep.target && !this.subscribers.includes(Dep.target)) {
    22. this.subscribers.push(Dep.target); // 收集依赖
    23. }
    24. }
    25. notify() {
    26. this.subscribers.forEach((subscriber) => subscriber.update()); // 通知更新
    27. }
    28. }
    29. // 定义响应式数据劫持函数
    30. function defineReactive(obj, key, val) {
    31. const dep = new Dep();
    32. Object.defineProperty(obj, key, {
    33. get() {
    34. dep.depend(); // 收集依赖
    35. return val;
    36. },
    37. set(newVal) {
    38. if (newVal !== val) {
    39. val = newVal;
    40. dep.notify(); // 通知更新
    41. }
    42. },
    43. });
    44. }
    45. // 创建Vue实例
    46. class Vue {
    47. constructor(options) {
    48. this.data = options.data;
    49. for (let key in this.data) {
    50. defineReactive(this.data, key, this.data[key]);
    51. }
    52. new Watcher(this, options.key, options.updateFn);
    53. }
    54. }

    以上是对Vue源码实现双向绑定的简要描述。定义了Watcher观察者对象和Dep依赖对象。在defineReactive函数中,我们使用Object.defineProperty对数据对象进行劫持,当数据发生变化时,会触发相应的gettersetter函数。在getter函数中,我们收集依赖;在setter函数中,我们通知依赖进行更新。通过创建Vue实例时创建的观察者对象,我们实现了数据和视图之间的双向绑定。

    需要注意的是,以上示例是对Vue源码实现双向绑定的简化描述,并不包含Vue源码中的所有细节和优化,实际的实现细节更加复杂。Vue源码中还包含了更多的优化和处理逻辑,例如异步更新、依赖追踪、批量更新等。这些细节使得Vue的双向绑定更加高效和可靠。

    Vue通过观察者模式实现了双向数据绑定。它通过劫持数据对象、创建依赖关系、订阅数据变化等步骤,实现了数据和视图之间的自动同步。这种机制使得开发者可以专注于业务逻辑而不必手动操作DOM元素。

    优缺点

    优点
    1. 解耦:主题和观察者之间解耦,使得它们可以独立变化。
    2. 可扩展性:可以方便地添加新的观察者或删除现有的观察者。
    3. 灵活性:可以动态地添加或删除观察者,根据需求选择订阅感兴趣的事件。
    缺点
    1. 观察者过多时可能影响性能。
    2. 观察者和主题之间的关系可能变得复杂

    总结

    观察者模式是一种常用的设计模式,在前端开发中有广泛应用。它通过定义一种一对多的依赖关系,实现了对象之间的解耦和灵活性。通过使用观察者模式,可以实现事件处理、数据绑定、响应式系统等功能。然而,需要根据具体情况权衡使用观察者模式所带来的优缺点。

  • 相关阅读:
    多御安全浏览器使用技巧,剖析7大优点特性
    代驾APP_第一章_项目环境搭建_第二节
    阿里云云效流水线教程
    深入理解python中的subprocess模块
    微服务治理浅谈
    【每日一题】CF1690E. Price Maximization | 双指针 | 简单
    算法竞赛入门【码蹄集新手村600题】(MT1401-1450)
    洛谷基础题练习5
    【ACM程序设计】动态规划 第二篇 LCS&LIS问题
    基于HTML5和CSS3搭建一个Web网页(二)
  • 原文地址:https://blog.csdn.net/wanghongpu9305/article/details/133268408