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