前言
在前端开发中，随着应用复杂度的提升，数据结构层次也越来越庞大。在处理这些数据结构时，我们往往需要对其进行规范化。在这种情况下，Normalizr 是一个非常实用的库。
Normalizr 可以将复杂的嵌套数据结构变成扁平的规范数据结构。我们可以使用简单的结构和属性名称来表示它。在这篇文章中，我们将介绍一个基于 Normalizr 的 npm 包，larsbs-normalizr，以及如何使用它。
什么是 larsbs-normalizr
larsbs-normalizr 是一个 JavaScript 库，旨在帮助简化数据规范化过程。该库是基于 Normalizr 构建的，并在其基础上做了一些扩展。
larsbs-normalizr 的扩展功能主要包括类型定义、自定义实体 ID、以及一些便捷的方法来处理实体数据。
教程
安装
在使用 larsbs-normalizr 之前，需要先安装它。可以通过 npm 或 yarn 进行安装：
npm install larsbs-normalizr --save
或者
yarn add larsbs-normalizr
使用
在 larsbs-normalizr 中，实体被定义为具有唯一 ID 和属性的对象。从这些实体中创建规范化的数据结构是通过创建 schema。 schema 是一个描述对象如何被嵌套的对象。这个 schema 被用来规范化数据。
类型定义
在 larsbs-normalizr 中，支持的类型包括以下几种：
- array
- boolean
- date
- entity
- map
- number
- string
- union
- values
创建 schema
可以使用 larsbs-normalizr 创建的 schema 来规范化数据。以下是一个示例：
import normalizr from 'larsbs-normalizr'
const user = new normalizr.schema.Entity('users')
const post = new normalizr.schema.Entity('posts', {
author: user
})
const schema = { posts: [post] }在上面的代码中，我们创建了两个实体 user 和 post。
我们将 post 实体的 author 属性定义为一个 user 实体，这意味着 post 的规范化结果将包含一个 entities.users 对象。
我们将 schema 对象定义为规范化出的对象，其中 posts 是一个数组，其中每个元素都是 post 实体对象。
自定义实体 ID
默认情况下，larsbs-normalizr 在规范化期间为实体自动分配 ID。但是，如果需要，我们也可以自己定义 ID。
const user = new normalizr.schema.Entity('users', {}, {
idAttribute: 'uuid'
})在上面的代码中，我们将 users 实体的 ID 指定为 uuid 属性。
规范化数据
一旦构建了 schema，就可以使用 larsbs-normalizr 将数据规范化。以下是一个示例：
-- -------------------- ---- -------
----- ---- - -
------ -
-
--- --
------ --- ----- ------
----- ----- -- -- ----- ------
------- -
--- --
----- ----- ----
-
--
-
--- --
------ --- ------ ------
----- ----- -- -- ------ ------
------- -
--- --
----- ----- ------
-
-
-
-
----- ---------- - ------------------------- -------在上面的代码中，我们规范化了一个具有两个 post 实体的数据结构。在规范化之后，将生成一个 entities 对象，其中包含 users 和 posts 两个实体，以及它们的属性。
可以通过以下方式访问规范化的数据：
console.log(normalized.result) // [1, 2]
console.log(normalized.entities.posts) // { 1: {id: 1, title: 'My first post', ...}, 2: {id: 2, title: 'My second post', ...} }
console.log(normalized.entities.users) // { 1: {id: 1, name: 'John Doe'}, 2: {id: 2, name: 'Jane Smith'} }更多功能
除了上面介绍的基本功能之外，larsbs-normalizr 还提供了其他一些功能。以下是一些值得注意的功能：
给规范化的结果添加附加数据
有时，在规范化数据时，可能需要添加一些额外的数据，以便在访问规范化结果时进行引用。可以通过使用 normalizr.denormalize 函数的 meta 参数来完成此操作。
-- -------------------- ---- -------
----- ------ - - ------ ------ -
----- ---- - -
------ -
- --- -- ------ --- ----- ------ ----- ----- -- -- ----- ------ ------- - --- -- ----- ----- ---- - -
--
----- -
------------- -
-
-
----- ---------- - ------------------------- -------
----- ------------ - ---------------------------------------- ------- -------------------- -
------------- --------------------
--在上面的代码中，我们在 data 对象中添加了一个 meta 属性，其中包含附加数据。在计算一个实例时，我们使用 normalizr.denormalize 函数和 meta 参数将这些信息添加到结果中。
快速获取规范化结果的所有实体 ID
如果需要，可以使用 normalizr.getIds 函数快速获取规范化结果的所有实体 ID。
-- -------------------- ---- -------
----- ------ - - ------ ------ -
----- ---- - -
------ -
- --- -- ------ --- ----- ------ ----- ----- -- -- ----- ------ ------- - --- -- ----- ----- ---- - --
- --- -- ------ --- ------ ------ ----- ----- -- -- ------ ------ ------- - --- -- ----- ----- ------ - -
-
-
----- ---------- - ------------------------- -------
----- ---------- - ----------------------------------- -------在上面的代码中，我们使用 normalizr.getIds 函数获得了规范化结果中的所有 post 实体 ID。
总结
本文介绍了 larsbs-normalizr 这个 npm 包，以及如何使用它来规范化数据。此外，我们还介绍了 larsbs-normalizr 提供的其他一些功能，例如添加 meta 数据和快速获取实体 ID。
larsbs-normalizr 是一个非常有用的工具，它可以帮助我们更好地处理复杂的嵌套数据结构。希望本文对你在数据规范化方面的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551c381e8991b448cf247