changed.js 是一个针对 web 应用程序优化的 npm 包，它可以在 web 应用程序开发中常常出现的 DOM 元素改变后触发回调函数，从而优化网站的性能和用户体验。在这篇文章中，我们将为您介绍该 npm 包的使用教程。
安装
changed.js 可通过 npm 包管理工具进行安装。在命令行中，执行以下命令安装该 npm 包：
npm install changed
引用
安装成功后，您可以在您的项目中引用 changed.js。
import changed from 'changed';
使用
初始化
下面是一个最简单的使用例子：
changed('#box').observe(() => {
console.log('Box is now different!');
});这个例子将观察 id 为 box 的元素的变化，如果有变化，就会触发回调函数输出 Box is now different!。在这个例子中，我们通过 changed() 函数传入了我们想要观察的元素的选择器，并使用 observe() 函数对这个元素进行了观察。
配置
除了 changed() 函数和 observe() 函数外，changed.js 还有许多配置函数可供您选择。
childList
childList 配置项是一个布尔值，表示是否监听子元素的改变。如果将其设置为 true，那么当被观察的元素的子元素被添加、移除或更改时，会触发回调函数。如果设置为 false，则只观察被观察的元素本身。
changed('#box').childList(true).observe(() => {
console.log('Box\' Children are now different!');
});attributes
attributes 配置项是一个布尔值，表示是否监听被观察元素的属性改变。如果将其设置为 true，那么当被观察的元素的属性被更改时，会触发回调函数。如果设置为 false，则不会观察属性更改。
changed('#box').attributes(true).observe(() => {
console.log('Box\' attributes are now different!');
});attributeFilter
attributeFilter 配置项是一个字符串数组。当 attributes 设置为 true 时，如果 attributeFilter 被设置为一个包含属性名称的数组，那么当被观察的元素的任何属性更改只要该属性名称是在 attributeFilter 中被指定的，就会触发回调函数。如果没有指定属性名称，它将观察所有属性的变化。
changed('#box').attributes(true).attributeFilter(['class']).observe(() => {
console.log('Box\' class is now different!');
});subtree
subtree 配置项是一个布尔值，表示是否观察被观察的元素和它的后代元素的变化。如果将其设置为 true，那么当被观察的元素的后代元素被添加、移除或更改时，会触发回调函数。如果设置为 false，则只观察被观察的元素本身和它的子元素。
changed('#box').subtree(true).observe(() => {
console.log('Box\' children and descendants are now different!');
});断开观测
有时候，您可能想要在一段时间里停止观察元素。在这种情况下，您可以使用 disconnect() 函数停止观察。
const obs = changed('#box').observe(() => {
console.log('Box is now different!');
});
// 过一段时间调用这个函数，就会停止观察元素的变化
obs.disconnect();示例
下面是一个示例 changed.js 使用的代码，它观察一个列表元素和它的孩子：
<ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
changed('#myList').childList(true).subtree(true).observe(() => {
console.log('List is now different!');
});这将观察 id 为 myList 的列表元素和它的孩子的变化，如果有变化，就会触发回调函数输出 List is now different!。
结论
通过本文所介绍的 changed.js，我们了解了如何在 web 应用程序开发中使用该 npm 包。同时，为了获得更好的性能和用户体验，我们也应该采取使用 changed.js 的实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e67f8