在前端开发中，Form表单是不可避免的要素之一。随着应用的复杂性的不断增加，Form表单本身的设计也越来越复杂，例如表单数据的动态添加和删除，数据状态的梳理和更新等。而这些问题的解决最多的就是使用JavaScript来实现。而npm包form-change-tracker就是一个很好的解决方案。
什么是npm包form-change-tracker
form-change-tracker是一个用Javascript编写的npm包，用于跟踪Form表单中输入数据的变化，并在数据发生变化时触发相应的事件。该npm包是基于观察者模式来实现的。
安装和使用
安装
form-change-tracker可以通过npm来安装，运行以下命令：
npm i form-change-tracker
使用
包引入
在需要使用该npm包的文件中，先引用该包：
const FormChangeTracker = require("form-change-tracker");初始化
使用该包的前提条件是需要先获取form表单节点，并使用该节点 new 一个 FormChangeTracker 的实例：
const form = document.getElementById("my-form");
const tracker = new FormChangeTracker(form);监听表单变化
监听表单变化，并进行操作，例如此处需要获取表单的值以及实时更新表单值：
tracker.onChange(() => {
const data = tracker.data;
console.log(data);
});获取表单数据
表单数据存储在 tracker.data 中，在表单发生变化时，该变量会自动更新:
console.log(tracker.data);
存在变化判断
判断form表单中的输入值是否存在变化：
if (tracker.isChanged()) {
console.log("Input values changed!");
}示例代码
下面是一个完整的使用form-change-tracker监控表单变化的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------------
------- --------------------------------------------------------------------------------------------
-------
------
----- -------------
------ ----------- -------------------
------ ------------ --------------------
------ --------------- -----------------------
-------
--------
----- ---- - -----------------------------------
----- ------- - --- ------------------------
------------------- -- -
----- ---- - -------------
------------------
---
---------
-------
-------总结
form-change-tracker能够很好地跟踪Form表单中输入数据的变化，并在数据发生变化时触发相应的事件，相比其他开发方式更加简洁、直接、高效。相信本文的介绍对大家使用该npm包有一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e2d9381d61a3540992