前端中的设计模式——观察者模式

在实现js中的观察者模式前,先了解两个js中的概念

1. hidden class

解释: 由于 JavaScript 是一种动态编程语言，属性可进行动态的添加和删除，这意味着一个对象的属性是可变的，大多数的 JavaScript 引擎（V8）为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类，这些类附加到每个对象上，以跟踪其形状/布局。这样可以优化属性访问时间。

2. js 中的delete操作符

delete操作符存在的问题:

使用 delete 操作符并不会直接释放内存，而是说它会使得 V8（Javascript）引擎中的 hidden class 失效.

优雅的删除:

// 简单删除
const { a, ...obj } = { a: 1, b: 2, c: 3 };
// 多属性删除
const delProp = (obj = {}, props = []) => JSON.parse(JSON.stringify(obj, (key, value) => props.includes(key) ? undefined : value));

3. 观察者模式

1. 概要: 定义了对象之间的依赖关系.可以通知所有依赖于它的对象.(前端更多的是通知事件执行)

2. 角色:

   • 被观察者: 维护一组观察者， 提供用于增加、移除、通知观察者的方法.
   • 观察者: 提供一个更新接口，用于当被观察者状态变化时，得到通知并执行更新.

3. 图解:
   

4. 实现:

   class Observable {
     constructor() {
       this.events = {};
     }
   
     add(name, handle) {
       this.events[name] = handle;
     }
   
     remove(props = []) {
       this.events = JSON.parse(JSON.stringify(this.events, (key, value) => props.includes(key) ? undefined : value))
     }
   
     notify(name, ...params) {
       if (this.events[name]) {
         this.events[name].apply(this, params);
         return;
       }
       throw new Error('not find!');
     }
   }
   

5. 那些不被注意的观察者模式(dom事件绑定)

   // 1级
   document.querySelector('#btn').onClick = function () {
     alert('You click this btn');
   }
   // 2级
   document.querySelector('#btn').addEventListener('click',function () {
           alert('You click this btn');
       },false)
   

6. 应用场景

   兄弟组件通信(小程序实例)
   完整源代码