前端经常需要对网站的 DOM 进行操作，其中对元素的增、删、改、查较为常见。但是对于不同类型的元素，操作方式也会有所不同，尤其是某些元素的属性改变时，需要我们借助 JavaScript 来实现。这时候，有一个非常实用的 npm 包 element-change，可以帮我们轻松实现对元素属性的监听，并在属性发生变化时调用回调函数处理。
什么是 element-change？
element-change 是基于 MutationObserver 封装的一个 npm 包，能够实现对 DOM 元素属性的监听，在元素属性发生变化时回调函数会被触发。使用它可以从根本上避免由属性变化导致的组件状态不一致、样式错误等问题。
如何使用 element-change？
安装
可以使用 npm 安装 element-change:
npm install element-change --save
也可以通过 cdn 直接引入其 js 文件：
<script src="https://cdn.jsdelivr.net/npm/element-change@1.4.0/dist/element-change.min.js"></script>
使用示例
下面我们来看一个具体的例子，假设我们现在需要监听一个 input 输入框的 value 值变化，并在变化的时候 console.log 出来新的 value 值。
HTML 代码：
<input id="input-text" type="text" value="hello world"/>
JS 代码：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- ----- - ------------------------------------- ----- -------- - -------------------- - ----------- ----- ---------------- --------- -- -------- --------- - ------------------ ----- --- ------- -- ------------------ -- ----------- - ------ --------------- ---- ------- ---- ------- ----- --- ------- -- ----- -------------- --------------------- ------
在这个例子中，我们导入了 element-change，在对应的 input 元素上创建了一个 observer 监听器，用于监听 value 属性的改变。这个监听器会在 value 发生变化时被触发，然后执行我们定义的回调函数，将新值输出到 console 中。
除了监听 input 的 value 属性，我们还可以监听 DOM 的其他属性变化，比如 className、style 等。
实战应用
除了基础的使用方法，我们还可以尝试运用 element-change 去解决实际问题。下面是一些实战应用：
实现双向绑定
在 React/Vue 等框架中，双向绑定是非常常用的特性，但在原生 JS 编写的代码中，实现双向绑定并不是那么方便，需要借助一些第三方库的帮助。这时我们可以使用 element-change 来实现一个简单的双向绑定。
HTML 代码：
<input id="input-text" type="text" /> <p>输入的内容为：<span id="show-input"></span></p>
JS 代码：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- ----- - ------------------------------------- ----- ---- - ------------------------------------- -------------------- - ----------- ----- ---------------- --------- -- -------- --------- - ---------------- - ------------- --
在这个例子中，我们监听了 input 输入框的 value 变化，将其同步到了 span 中，实现了简单的双向绑定。
监听元素节点的添加
在实际的项目中，我们经常有需要监听 DOM 中的插入或删除操作。尤其在我们需要实现一些动态组件的时候，这个功能就可以派上用场。
HTML 代码：
<div id="container"></div> <button id="add">添加按钮</button>
JS 代码：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- --------- - ------------------------------------ ----- ------ - ------------------------------ ------------------------ - ---------- ---- -- -------- --------- --------- - -------------------------------- -- -------------------------------- -------- -- - ----- --- - ----------------------------- -------------------------- --
在这个例子中，我们对 container 容器设置了 childList 的监听选项，这样当添加新的节点到 container 中的时候，mutationCallback 函数就会被触发。然后我们在回调函数中输出新增的元素节点列表。
总结
通过 element-change，我们可以很方便地监听元素的属性变化，并在其发生改变时触发回调函数进行相应处理。最常见的用法是监听输入框 input 的值变化，通过它可以实现简单的双向绑定。另外我们还可以监听 DOM 节点的插入和删除等操作，方便在实现动态组件等场景中派上用场。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0b81e8991b448d9abb