引言
@strong-roots-capital/observe 是一个支持零配置的 JavaScript 事件监听模块。该模块利用了 ES6 Proxy 对象的特性，提供一种简单且可扩展的方式来监听目标对象的变化并做出响应。在前端开发中，监听对象变化是一个常见的需求，如监听表单数据、状态变化、用户行为等，本文将详细介绍该 npm 包的使用及其API。
安装
通过 npm 在项目中安装 @strong-roots-capital/observe。
npm install @strong-roots-capital/observe
使用方式
监听对象属性变化
首先，在需要监听的对象上创建 Observer 对象:
const { Observer } = require('@strong-roots-capital/observe')
const config = {
option1: 'value1',
option2: 'value2'
}
const observed = new Observer(config)这里我们创建一个配置对象 config， 然后通过 new 操作符将其传给 Observer 构造函数。对于新创建的 observed，可以像访问一般对象一样访问其属性：
console.log(observed.option1) // 'value1'
然而，访问一个属性实际上将会调用 getter 函数并返回该属性值。因此，对 observed 对象的读取操作是可以被我们定制的：
const observed = new Observer({ value: 0 })
observed.value // 0
observed.value++ // 自增 value
console.log(observed.value) // 1上例中，我们定义了在属性 value 被获取时执行的方法。该方法将 value 的值自增，因此再次访问其值时会输出 1。
监听对象任意属性变化
除了监听对象某一个属性的变化外，@strong-roots-capital/observe 可以监听一个对象的所有属性变化，包括新增、删除、修改：
-- -------------------- ---- ------- ----- -------- - --- ------------ --------------- - ------- ------------------- ----- ------ -- - ---------------------------- ------- -- ---------- -- --------------- - ---- ------ -- ------- -- --------------- ------- -- ----- -- --------------- ------- -- --- -----
通过 observed.$on('set', callback) 方法，可以为 Observer 事件添加回调函数，该回调函数会在监听的属性被修改时被触发。在该示例中，我们监听了对象的所有属性改变事件，并且输出了属性修改的信息。
取消属性的监听
我们同样可以移除之前添加的回调函数：
-- -------------------- ---- ------- ----- -------- - --- ------------ ----- -------- - ----- ------ -- - ---------------------------- ------- -- ---------- - ------------------- --------- ------------ - ----- -- -- ------------ ------- -- --- -------------------- --------- ------------ - ------ -- ------
可以看到，移除回调函数 callback 后，在触发属性改变时，不会有任何输出结果被打印。
API
Observer(config)
创建一个观察者，执行传入的配置对象 config。
6 种可选的配置参数名：
- set：监听属性车评，回调方法接受
key和value作为参数； - get：监听属性获取，回调方法接受
key和value作为参数； - apply：监听对象的方法调用，回调方法接受目标对象、参数和返回值作为参数；
- deleteProperty：监听属性删除，回调方法接受
key作为参数； - has 和 ownKeys：监听对象自身属性的拥有者检测、枚举，回调方法接受
key作为参数。
observed.$on(event, callback)
监听观察者对象 observed 上的 event 事件，当event 事件被触发时，回调方法 callback 依次被执行。
observed.$off(event, callback)
移除观察者对象 observed 上的 event 事件回调方法 callback。
Proxy 对象 API
@strong-roots-capital/observe 的核心部分依赖于 ES6 的 Proxy 对象，所以它还支持 Proxy 对象所有接口：
getPrototypeOfsetPrototypeOfisExtensiblepreventExtensionsgetOwnPropertyDescriptordefinePropertyhasgetsetdeletePropertyownKeysapplyconstruct
结论
@strong-roots-capital/observe 是一个零配置的 JavaScript 事件监听模块，它提供了强大的事件监听功能，使得在前端应用程序中监听属性变化变得非常容易。在应用程序开发中，@strong-roots-capital/observe 为开发者提供了一种简单、可扩展、又易于维护的方式来监听目标状态变化，从而提高了开发效率和代码可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d0927023822975