在前端应用中，我们经常需要监听某些变量或者对象的变化，以便及时更新视图和数据。而 observer.js 就是一个轻量级的 npm 包，可以帮助我们实现简单而高效的数据监听功能。本文将详细介绍 observer.js 的使用方法，包括如何安装、如何使用以及一些注意事项。
什么是 observer.js
observer.js 是一个基于 ES6 Proxy 特性的轻量级 npm 包，可以用于监听 JavaScript 对象的变化。理论上来说，observer.js 可以用于监听任何 JavaScript 对象，包括数组、函数等等。这样，我们就可以通过监听对象的变化来及时更新页面。
如何安装 observer.js
observer.js 是一个 npm 包，可以通过 npm 来安装。在终端中输入以下命令即可：
npm install observer-js --save
如何使用 observer.js
使用 observer.js 非常简单。在代码中导入 observer.js：
import observer from 'observer-js';
然后，我们就可以创建一个被动观察者对象：
const obj = observer({});这个被动观察者对象与普通对象几乎没有区别，但是可以监听数据变化：
obj.a = 1; // 监听到 a 的变化
obj.b = {}; // 监听到 b 的变化
obj.b.c = true; // 监听到 b.c 的变化我们也可以监听数组的变化：
const arr = observer([]); arr.push(1); // 监听到数组的变化 arr[1] = 2; // 监听到数组的变化
甚至可以监听函数的调用：
const fn = observer(function() {
console.log('function called');
});
fn(); // 监听到函数的调用在监听到数据变化后，我们可以通过回调函数来处理变化事件：
const obj = observer({a: 1});
obj.onChange('a', (newValue, oldValue) => {
console.log('a changed from', oldValue, 'to', newValue);
});
obj.a = 2;在这个例子中，我们注册了一个回调函数来监听 obj.a 的变化。当 obj.a 的值从 1 变为 2 时，回调函数就会被触发，并输出变化信息。
注意事项
- observer.js 目前只支持浏览器端使用，不支持在服务端使用。
- observer.js 依赖 ES6 Proxy 特性，不支持低版本浏览器。
- observer.js 不支持对象属性的删除操作，只能给属性赋值。
- observer.js 不会监听对象内部属性的变化，例如监听
obj.b不会监听obj.b.c的变化。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------------
-------
------
------- -----------------------------------------------------------------------------------
--------
----- --- - ------------ ----
----------------- ---------- --------- -- -
-------------- ------- ------ --------- ----- ----------
---
----- - --
---------
-------
-------在这个页面中，我们导入了 observer.js 的 npm 包，使用 observer() 函数创建了一个被动观察者对象 obj，并用 onChange() 方法来注册监听回调函数。在 obj.a 被赋值为 2 的时候，回调函数就会被触发，并输出变化信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9e3d1de16d83a67069