背景
很多前端项目都需要处理前后端交互过程中的数据结构，这些数据往往是复杂的嵌套关系，难以直接使用。normalizr 就是一款优秀的数据规范化库，它可以将复杂的数据结构转化为容易操作的格式。不过，normalizr 的使用需要一定的学习成本和手写代码来映射原始数据和规范化的结构的对应关系。
近日，@edcarroll 开发并发布了一款叫做 @edcarroll/normalizr-decorators 的 npm 包，该包基于装饰器语法，可以大幅简化 normalizr 的使用，让前端开发者可以更加专注于业务逻辑的实现。
安装
在项目根目录下，执行以下命令安装 @edcarroll/normalizr-decorators ：
npm install @edcarroll/normalizr-decorators
使用方式
基本概念
在使用 @edcarroll/normalizr-decorators 之前，需要了解以下基本概念：
entity:normalizr中表示一种数据实体；attribute:normalizr中表示一个实体的某个属性；factory:normalizr中表示entity和attribute的映射关系。
定义 entity 和 attribute
使用 @edcarroll/normalizr-decorators 定义一个 entity 和 attribute 非常简单。我们只需要在类名和属性前加上相应的装饰器即可，例如：
-- -------------------- ---- ------- ------ - ------- --------- - ---- ---------------------------------- -- -- ------ --------- ----- ---- - -- -- --------- ------------ ------ --- ------- ------------ ------ ----- ------- ------------ ------ ---- ------- -
这段代码定义了一个名为 User 的 entity ，包含了 id 、 name 和 age 三个 attribute 。
定义 factory
定义 factory 也非常简单。只需要在相应的方法上添加装饰器即可。例如：
-- -------------------- ---- -------
------ - ------- ---------- ------- - ---- ----------------------------------
---------
----- ---- -
------------
------ --- -------
------------
------ ----- -------
------------
------ ---- -------
----------
------ -------- --- ----- --- --- ---- -
----- ---- - --- -------
------- - ---
--------- - -----
-------- - ----
------ -----
-
-这段代码定义了一个名为 User 的 entity ，并在其中定义了一个名为 create 的 factory ，用来将原始数据转换为 User 类型的实体对象。
定义 entity 之间的关系
在复杂的数据结构中， entity 之间存在各种嵌套和关联，如何在 @edcarroll/normalizr-decorators 中定义它们之间的关系呢？很简单，只需要在 attribute 上指定关联的 entity 、属性名和 reference 即可。例如：
-- -------------------- ---- ------- --------- ----- ------- - ------------ ------ --- ------- ------------ ------ -------- ------- -- -- ---- ------------ ------- -------- ---- --------- ---------- ------ -- ------ ----- ----- -
这段代码定义了一个名为 Comment 的 entity ，其中使用 @Attribute 装饰器将一个名为 user 的属性定义为 User 类型，并且指定它关联的 entity 名称为 users ，使用 userId 作为关联键。
规范化数据
在定义好 entity 、 attribute 和 factory 之后，我们就可以使用 normalizr 将原始数据规范化了。首先，定义一个规范化的 schema ：
-- -------------------- ---- ------- ------ - ------ - ---- ------------ ------ - ---- - ---- --------- ------ - ------- - ---- ------------ ----- ------------- - --- ------------------------- - ----- --------------- --- ----- ---------- - --- ----------------------- ----- ---------- - --- ---------------------- - --------- ---------------- ----- ----------- ---
这段代码定义了一个名为 feedSchema 的 schema ，它关联了 Feed 、 Comment 、 User 三个 entity 。
其中，使用 schema.Entity 定义了三个 entity 的名称，即 comments 、 users 和 feeds 。通过使用 userSchema 和 commentSchema ， feedSchema 定义了 comments 和 users 的引用关系。
然后，我们就可以使用 normalize() 方法将原始数据规范化了。
-- -------------------- ---- -------
----- ---- - -
--- --
-------- ----- ----------
----- -
--- --
----- -----------
---- ---
--
--------- -
-
--- --
-------- ----- ----------
------- --
--
--
--
----- -------------- - --------------- ------------当我们执行 normalize() 方法的时候， @edcarroll/normalizr-decorators 会自动将 entities 和 result 分别传入 normalizr 的 normalize 方法中，并返回规范化后的数据。这样，我们不需要手动构造 entities 和 result 的对象，可以大幅降低学习成本和开发难度。
示例代码
下面是一个完整的示例代码，展示了如何使用 @edcarroll/normalizr-decorators 和 normalizr 将复杂的原始数据转化为规范化的数据结构。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ------------
------ - ------- ---------- ------- - ---- ----------------------------------
---------
----- ---- -
------------
------ --- -------
------------
------ ----- -------
------------
------ ---- -------
----------
------ -------- --- ----- --- --- ---- -
----- ---- - --- -------
------- - ---
--------- - -----
-------- - ----
------ -----
-
-
---------
----- ------- -
------------
------ --- -------
------------
------ -------- -------
------------ ------- -------- ---- --------- ---------- ------ --
------ ----- -----
----------
------ -------- --- -------- ------ --- ------- -
----- ------- - --- ----------
---------- - ---
--------------- - --------
------------ - - --- ------ - -- -----
------ --------
-
-
---------
----- ---- -
------------
------ --- -------
------------
------ -------- -------
------------ ------- -------- ---------- ------ --
------ ----- -----
------------ ------- ----------- ---------- --------- --
------ --------- ----------
----------
------ -------- --- -------- ----- -------- --- ---- -
----- ---- - --- -------
------- - ---
------------ - --------
--------- - -----
------------- - ---------
------ -----
-
-
----- ------------- - --- ------------------------- - ----- -------------- ---
----- ---------- - --- -----------------------
----- ---------- - --- ---------------------- -
--------- ----------------
----- -----------
---
----- ---- - -
--- --
-------- ----- ----------
----- - --- -- ----- ----------- ---- -- --
--------- -
- --- -- -------- ----- ---------- ------- - --
- --- -- -------- ------ ---------- ------- - --
--
--
----- -------------- - --------------- ------------
----------------------------在这段代码中，我们使用 @edcarroll/normalizr-decorators 定义了三个 entity ： User 、 Comment 和 Feed 。 User 和 Comment 都定义了一个 factory ，用来将原始数据转化为相应的 entity 对象。
然后，我们使用 schema.Entity 定义了三个 entity 的关系。最后，使用 normalize() 方法将原始数据转化为规范化的数据结构。
结论
@edcarroll/normalizr-decorators 是一款优秀的 npm 包，它大幅简化了 normalizr 的使用流程，让前端开发者可以更加专注于业务逻辑的实现。希望本篇文章的介绍和示例代码能够帮助大家更深刻地理解 @edcarroll/normalizr-decorators 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb981e8991b448dc6d3