can-dom-mutate 是一个基于原生 DOM 操作的 JavaScript 模块，用于监听和触发 DOM 变化事件。它可以帮助开发者更方便地处理 DOM 变化的相关逻辑，并且可以帮助用户在浏览器中获得更好的性能和更好的用户体验。
安装
通过 npm 安装 can-dom-mutate：
npm install can-dom-mutate
使用
can-dom-mutate 通过注册事件监听器来帮助用户处理 DOM 变化。可以像下面这样使用它：
import { onMutation } from 'can-dom-mutate';
const el = document.getElementById('my-element');
onMutation(el, () => {
console.log('element was mutated!');
});可以看到，onMutation 函数的第一个参数是要监听的元素，第二个参数是回调函数。当元素被修改时，会触发回调函数。
除了这个基本用法，can-dom-mutate 还提供了更多的 API。
onInsertion
onInsertion 事件监听元素的插入事件：
import { onInsertion } from 'can-dom-mutate';
const el = document.getElementById('my-element');
onInsertion(el, () => {
console.log('element was inserted!');
});onRemoval
onRemoval 事件监听元素的删除事件：
import { onRemoval } from 'can-dom-mutate';
const el = document.getElementById('my-element');
onRemoval(el, () => {
console.log('element was removed!');
});手动触发事件
can-dom-mutate 还可以手动触发事件。比如，可以手动触发 onMutation 事件来模拟元素变化：
import { triggerMutation } from 'can-dom-mutate';
const el = document.getElementById('my-element');
triggerMutation(el);注意点
在使用 can-dom-mutate 时，需要注意一些细节以确保代码的可靠性：
- 合理释放资源：当不需要监听 DOM 变化事件时，应该调用 offMutation 等方法来取消事件监听，以避免内存泄漏。
- 尽量避免频繁触发事件：频繁地触发 DOM 变化事件可能会影响性能和用户体验。可以选择合适的触发时机来避免这个问题。
- 了解事件的传递机制：can-dom-mutate 的事件传递机制与普通的 DOM 事件有些不同。需要了解这个机制来避免一些奇怪的问题。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ----------
-------
------
---- ---------------------- ------------
------- -----------------------------
------- -----------------------------
------- ------------------------------------------------------------------
--------
----- -- - --------------------------------------
----- --------- - --------------------------------------
----- --------- - --------------------------------------
-------------- -- -- -
-------------------- --- -----------
---
--------------- -- -- -
-------------------- --- ------------
---
------------- -- -- -
-------------------- --- -----------
---
----------------------------------- -- -- -
------------ -- -----------------
---
----------------------------------- -- -- -
----- ----- - -----------------------------------
-- ------- -
---------------
-
---
-- ------ --
-------------- -- -
------------ - --------------
--------------------
-- ------
---------
-------
-------运行以上代码后，打开浏览器控制台即可看到相应的日志输出。点击“插入元素”或“删除元素”按钮会触发相应的事件，然后输出日志。同时，定时器会每秒钟模拟一次元素变化事件，也会输出日志。这里我们演示了 can-dom-mutate 的三个基本事件：onMutation、onInsertion 和 onRemoval。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75716