在前端开发中，我们常常需要监听 DOM 元素的变化事件，以实现一些实时更新或实时计算等功能。observe-el 是一款可以用来监听 DOM 元素变化的 npm 包，本文将介绍如何使用它，并附带实用示例代码。
安装
我们可以使用 npm 安装 observe-el：
npm install observe-el
基本用法
在监听 DOM 元素时，我们需要首先实例化一个 Observer 对象，然后调用它的 observe 方法来监听指定的 DOM 元素。例如：
import Observer from 'observe-el';
const observer = new Observer((mutations) => {
// 处理变化事件
});
const target = document.getElementById('target');
observer.observe(target);在上面的代码中，我们通过实例化一个 Observer 对象并传入一个函数作为回调参数来对 DOM 变化进行监听。回调函数会在每次 DOM 元素发生变化时被调用，它的参数 mutations 是一个由 MutationRecord 对象组成的数组，其中每个 MutationRecord 对象表示一次 DOM 变化的记录。
然后，我们可以选定一个要监听的 DOM 元素，例如上面代码中的 document.getElementById('target')，并将它传给 observe 方法，从而开始监听它的变化。
高级用法
除了基本的用法，observe-el 还提供了一些高级功能，以便更好地满足开发者的需求。
监听多个 DOM 元素
observe-el 支持一次性监听多个 DOM 元素。我们可以将要监听的 DOM 元素组成数组并传入 observe 方法。例如：
const targets = [
document.getElementById('target1'),
document.getElementById('target2'),
document.getElementById('target3')
];
observer.observe(targets);监听指定类型的变化事件
在实际开发中，我们常常只需要监听某些特定类型的变化事件，以避免不必要的计算和更新。observe-el 提供了一个 options 参数，可以指定要监听的变化类型。例如：
-- -------------------- ---- ------- ----- -------- - --- -------------------- -- - -- ------ -- - ---------- ----- -- ------- ----------- ----- -- ------ -------- ---- -- -------- --- ----- ------ - ---------------------------------- -------------------------
在上面的代码中，我们通过 options 参数来指定监听子节点和属性的变化，并且将 subtree 属性设置为 true，以便监听整个子树。
取消监听
当我们不再需要监听某个 DOM 元素时，可以使用 disconnect 方法来取消监听。例如：
observer.disconnect(target);
这将停止监听目标 DOM 元素上的所有变化事件。
示例代码
下面是一个示例代码，演示了如何使用 observe-el 监听选择框 select 中选项的变化，并计算选项的总价值。在选择框中每选一个选项，都会实时更新总价值：
HTML：
<select id="select"> <option value="1" data-price="100">Apple</option> <option value="2" data-price="200">Banana</option> <option value="3" data-price="150">Cherry</option> <option value="4" data-price="300">Durian</option> </select> <h1>Total price: <span id="totalPrice"></span></h1>
JavaScript：
-- -------------------- ---- -------
------ -------- ---- -------------
----- ------ - ----------------------------------
----- ---------- - --------------------------------------
--- --- - --
----- -------- - --- -------------------- -- -
---------------------------- -- -
-- -------------- --- ------------ -
---------------------------------- -- -
-- ------------- --- --------- -
----- ----- - ----------------------------------------- -- --
--- -- ------
-
---
------------------------------------ -- -
-- ------------- --- --------- -
----- ----- - ----------------------------------------- -- --
--- -- ------
-
---
-
---
---------------------- - ----------
-- -
---------- ----
---
-------------------------在上面的代码中，我们首先获取选择框 select 和显示总价值的 totalPrice 元素。然后，我们初始化一个 sum 变量来保存选项的总价值。
接着，我们使用 observe-el 的 Observer 类，传入一个回调函数和 options 参数来监听 select 元素的子节点变化。回调函数会在每次选项发生变化时被调用，我们在回调函数中计算新的总价值并更新 totalPrice 元素的显示。
由于在选项变化时，修改了 DOM 树，我们需要在回调函数中遍历 mutations 数组，检查每个添加或删除的节点是否为选项，然后计算更新总价值。
总结
observe-el 是一款非常实用的 npm 包，可以用来监听 DOM 元素的变化，并进行实时更新和计算等操作。在实际开发中，我们可以结合其高级用法，以实现更加复杂和精细的功能。底层原理最为重要，因此学习其使用方法并结合案例总结开发经验，在实际开发中更加轻松使用 observe-el 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1681e8991b448e6e1c