简介
在前端开发中，经常会遇到需要让数据变化时自动更新页面内容的场景，此时一个可观察对象（Observer）便能派上用场。然而，手动实现一个可观察对象是非常困难的，因此可以借助第三方库，如 Vue.js 中的响应式原理来实现可观察对象功能。而 @jeefo/observer 正是提供了类似功能的一个 NPM 包。
安装
你可以使用 npm 或 yarn 来安装 @jeefo/observer：
# 使用 npm 安装 npm install @jeefo/observer # 使用 yarn 安装 yarn add @jeefo/observer
安装完成后，你可以在代码中引入 @jeefo/observer：
import { Observer } from '@jeefo/observer';使用
@jeefo/observer 提供了一个名为 Observer 的类，你可以使用它来创建可观察对象。下面是一个简单的例子：
-- -------------------- ---- ------- ----- ---- - --- ---------- ------ - --- -------------------- -- - ------------------ ---------- ------- --- ------------------- -- -- ------ -------- ------ ------- ---
通过 new Observer 创建了一个可观察对象 data，并给其设置一个初始状态 count: 0。在对象状态（state）改变时，subscribe 回调函数将会被调用。
为了订阅对象状态改变事件，你需要调用 subscribe 方法来订阅可观察对象的改变。subscribe 方法接收一个回调函数作为参数，该回调函数将在状态改变时被调用。在回调函数中，你可以访问到对象的新状态。
下面我们来看一个更完整的例子：
-- -------------------- ---- ------- ----- ---- - --- ---------- ------ -- ----- -- --- -------------------- -- - ------------------ -------- --------------------------- --- ----- ------------ - ------- -- - --------------- - ------------------- -- ----- ----------------- - -- -- - ------------------- -- --------------------------------------------------------- -------------- ---------------------------------------------------------- -------------------
这个例子中，当用户输入框中输入文字或者点击按钮时，Observer 对象的状态都会被更新。同时，我们在 subscribe 方法中订阅了状态改变事件，并在回调函数中打印出当前的状态。
进阶使用
考虑性能
默认情况下，当可观察对象的状态改变时，订阅者（subscribe）函数将被调用。但是，有时某些状态的改变并不需要调用订阅者函数，比如仅仅修改了一个局部状态变量，而不是整个对象的状态。此时，你可以使用 Observer 的 publish 方法来手动触发一个状态改变事件。
-- -------------------- ---- ------- ----- ---- - --- ---------- ------ - --- -------------------- -- - ------------------ ---------- ------- --- -- -- ------- -------------- -------------- ------ - --- -- -- ------ -------- ------ ------- ---
当你在 publish 方法中指定对象的某个属性值时，只有该属性值被修改时才会调用订阅者函数。
深度观察
你可能会遇到需要观察对象中某个属性的嵌套属性的场景。比如，你想观察一个对象中的 user.name 属性变化时，自动更新页面上的用户名。这时候，你可以使用 Observer 的 watch 方法来实现深度观察。
-- -------------------- ---- -------
----- ---- - --- ----------
----- --------
-------- -
----- ----------
---- --------
-
---
--------------------- ----- -- -
-------------------- -------- ---------------------------
---
---------------------- - --------- -- -- -------- -------- ------ ---------- ---- ----------watch 方法接收一个属性名和回调函数作为参数。当该属性及其任意嵌套属性值发生改变时，回调函数即会被调用。
预设属性
除了使用 new Observer 来设置对象的初始状态外，你还可以使用 Observer 的 assign 方法来一次性设置多个状态属性。
-- -------------------- ---- ------- ----- ---- - --- ----------- ------------- ----- -------- ---- --- ------ ------------------- --- -------------------- -- - ----------------- ---------- ------- --- -------------- ---- -- --- -- -- ----- -------- ------ ------ -------- ---- --- ------ --------------------
在上面的例子中，使用 assign 方法一次性设置了 user 对象的三个属性，同时订阅了对象的状态改变事件。
结论
@jeefo/observer 是一个功能完备的可观察对象库，可以有效地简化前端开发中的数据绑定和视图更新问题。本文介绍了其基本用法以及进阶技巧，希望能为你在实际开发中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe22b5cbfe1ea0611b25