在前端开发中，我们常常需要实时监听某个数据或对象的变化，并对这些变化进行一些特定的操作。为了实现这个功能，我们可以使用 npm 包 observants。observants 为我们提供了一种方便、易于使用的方式来监听数据变化。
安装
observants 支持通过 npm 进行安装，在命令行中运行以下命令即可：
npm install observants
使用
observants 提供了一个 Observable 类，我们可以使用这个类来创建一个可观察的对象。具体使用方式如下：
const { Observable } = require('observants');
const data = new Observable({
name: 'John Doe',
age: 25,
});
在上面的代码中，我们使用 Observable 类创建了一个名为 data 的可观察对象，并初始化了两个属性 name 和 age。这些属性可以随时被修改，观察者会在属性值变化时被通知。
我们可以在这个对象上调用 subscribe 方法来订阅属性的变化，例如：
data.subscribe('name', (newValue, oldValue) => {
console.log(`name changed from ${oldValue} to ${newValue}`);
});
data.subscribe('age', (newValue, oldValue) => {
console.log(`age changed from ${oldValue} to ${newValue}`);
});
在上面的代码中，我们使用 subscribe 方法分别订阅了 name 和 age 这两个属性的变化事件。当这些属性的值发生变化时，观察者会自动调用相应的回调函数，并传递新旧值作为参数。
我们也可以使用 set 方法来修改属性的值，例如：
data.set('name', 'Jane Doe');
data.set('age', 30);
在上面的代码中，我们使用 set 方法修改了 name 和 age 的属性值。因为我们之前已经订阅了这些属性的变化事件，所以 set 方法会自动触发相应的回调函数。
示例代码
下面的代码演示了如何使用 observants 包来监听对象的变化并自动更新 UI：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----------------- ---------------
-------
------
--- ----------------
-- -------------
------- ------------------------------------------------------------------------------
--------
----- - ---------- - - -----------
----- ---- - --- ------------
----- ----- -----
---- ---
---
---------------------- ---------- --------- -- -
-------------------------------------------- - ---------
---
--------------------- ---------- --------- -- -
------------------------------------------ - ----- -------------
---
-------------- -- -
----- ------ - ------------------------ - -----
--------------- --------
-- ------
---------
-------
-------在这个示例中，我们创建了一个名为 data 的可观察对象，并订阅了 name 和 age 这两个属性的变化事件。通过 set 方法来模拟 age 值的变化，并将它更新到网页上。
可以尝试打开控制台来查看程序的输出。每秒钟 age 值就会随机变化一次，并且会自动更新到网页上。这个例子演示了如何使用 observants 包来实现实时数据绑定和 UI 更新的功能。
总结
observants 是一个很有用的 npm 包，它简化了前端开发中的数据监听和处理逻辑。使用 observants，我们可以很方便地创建可观察的对象，并订阅它们的变化事件。observants 还提供了一些实用的扩展方法，例如 deepCopy、deepMerge、debounce、throttle 等等。这些扩展方法可以帮助我们更方便地操作数据，并提高代码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a67022