什么是 @mojule/dom-object-mapper
@mojule/dom-object-mapper 是一个轻量级的 npm 包，主要用于 DOM 对象和 JavaScript 对象之间的映射。它提供了一个简单易用的接口，使得将 DOM 对象中的数据存储到 JavaScript 对象中变得非常容易，同时也能将 JavaScript 对象数据正确地映射到 DOM 对象中。
安装
要使用 @mojule/dom-object-mapper，首先需要安装它。在使用 npm 包管理器的项目中，可以通过以下命令进行安装：
npm install @mojule/dom-object-mapper --save
基本用法
使用 @mojule/dom-object-mapper 很简单，只需要实例化一个 DomObjectMapper 类，并且调用它的 mapToDom 和 mapToObject 方法就可以了。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
----- ------ - -
----- --------
---- ---
-------- -
------- ---- ---- ----
----- -------------
-
-
----- ---- - ------------------------------
----- --------------- - --- -----------------
-------------------------------- -----
----- ------------ - ---------------------------------在上面的例子中，我们创建了一个 person 对象，并使用 mapToDom 方法将它映射到了一个 form 元素中。接着，我们又使用 mapToObject 方法将从表单中得到的数据重新映射到了一个 JavaScript 对象中。
配置选项
@mojule/dom-object-mapper 还提供了一些可选的配置选项，可以帮助你更好地控制映射的过程。你可以在实例化 DomObjectMapper 类时提供一个 options 对象来设置这些选项。
前缀
前缀选项允许你设置一个前缀字符串，映射的数据将自动添加到此前缀下。这对于防止表单中的其他数据干扰你的映射结果很有帮助。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
----- ------ - -
----- --------
---- ---
-------- -
------- ---- ---- ----
----- -------------
-
-
----- ---- - ------------------------------
----- --------------- - --- ----------------- ------- --------- --
-------------------------------- -----
----- ------------ - ---------------------------------在上面的例子中，我们创建了一个 person 对象，并使用 mapToDom 方法将它映射到了一个 form 元素中。由于设置了 prefix 选项为 'person_'，所有映射的数据都会添加到表单中一个名为 'person_' 的前缀下。
属性名转换
属性名转换选项允许你指定一个函数，用于将 JavaScript 对象属性名转换为 DOM 元素的 name 和 id 属性值。这对于将 JavaScript 对象中的驼峰命名属性转换为下划线分隔属性名很有帮助。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
----- ------ - -
---------- --------
--------- --------
---- ---
-------- -
------- ---- ---- ----
----- -------------
-
-
----- ---- - ------------------------------
----- --------------- - --- -----------------
-------------- ---- -- ---------------------- ----- -- --------------------------
--
-------------------------------- -----
----- ------------ - ---------------------------------在上面的例子中，我们创建了一个 person 对象，并使用 mapToDom 方法将它映射到了一个 form 元素中。由于设置了 attrTransform 选项为一个函数，使得 JavaScript 对象中的驼峰命名属性转换为了下划线分隔命名形式。
总结
@mojule/dom-object-mapper 是一个非常实用的 npm 包，能够方便地实现 DOM 对象和 JavaScript 对象之间的映射，同时提供了可选的配置选项，能够帮助我们更好地控制映射过程。对于那些需要频繁操作 DOM 元素的 Web 开发者而言，@mojule/dom-object-mapper 绝对是一款很值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e081e8991b448e061d