前言
在现代的前端开发中，我们通常会遇到许多数据的处理问题。这些处理问题中，最常见的就是数据规范化。数据规范化是指将来自不同来源的数据统一成相同的格式，这样方便我们在项目的不同部分处理数据。而 @36node/query-normalizr 正是解决这个问题的一个 npm 包。
在本文中，我们将学习如何使用 @36node/query-normalizr 包进行数据规范化，包括使用方法、示例代码、详细的解释以及它的使用指导意义。
基本使用方法
让我们探索一些关于 @36node/query-normalizr 的使用。首先，我们需要通过 npm 安装这个包：
npm install @36node/query-normalizr
安装完成后，我们需要建立一些规范化规则，以便将来的数据处理。示例代码如下：
import { schema } from 'normalizr';
const creatorSchema = new schema.Entity('creator', {}, { idAttribute: '_id' });
const postListSchema = new schema.Entity('postList', {
creator: creatorSchema,
}, { idAttribute: '_id' });
export const listSchema = [postListSchema];这里我们定义了两个实体：creator 和 postList。creator 由一个名为 _id 的属性进行标识，而 postList 由 _id 和 creator 这两个属性标识。接下来，我们可以将我们已经建立的规范化规则传递给 query-normalizr，使它能够进行数据的规范化处理。
import queryNormalizr from '@36node/query-normalizr';
import { listSchema } from './entities';
const { normalize, selector } = queryNormalizr(listSchema);现在我们已经建立了 @36node/query-normalizr，让我们看看它是如何工作的。假设我们将从服务器获取以下数据：
-- -------------------- ---- -------
----- ------------ - -
--------- -
-
---- --
------ --------
-------- -----------
-------- -
---- --
----- -----
-
--
-
---- --
------ --------
-------- -----------
-------- -
---- --
----- ------
-
-
-
--通过调用 normalize 函数，我们可以将这个数据规范化。只需要调用一次 normalize 函数，将 responseData 传入参数即可。
const normalizedData = normalize(responseData); console.log(normalizedData);
通过 console.log() 函数输出 normalizedData，我们可以看到该数据已被规范化。示例代码如下：
-- -------------------- ---- -------
-
------- -
--------- --- --
--
--------- -
-------- -
-- -
---- --
----- -----
--
-- -
---- --
----- ------
-
--
--------- -
-- -
---- --
------ --------
-------- -----------
-------- -
--
-- -
---- --
------ --------
-------- -----------
-------- -
-
-
-
-深入解释
@36node/query-normalizr 的主要作用是将一些零散的数据（例如上面的 responseData）规范化成具有层次性的数据结构（例如通过 normalize() 函数返回的 normalizedData）。
同时，通过 selector() 函数，可以通过传递 id 和实体类型来访问规范化后的数据。这种访问方式可以在项目的不同部分重复使用相同的数据结构。
schema
@36node/query-normalizr 的 schema 实体定义了规范化系统的所有属性。例如，我们在上面的示例代码中定义了两个实体：creator 和 postList。
在这个实体中，我们可以使用 idAttribute 来定义此实体的标识符。在 postList 实体中，我们定义了 _id 和 creator 属性。
normalize
@36node/query-normalizr 的 normalize 函数被用于规范化数据，并将其转换为带有层次结构的对象。当我们调用 normalize() 函数时，我们将原始数据传递给它，并传递已定义的 schema 实体。如果数据结构非常复杂，可以多次调用 normalize() 函数。
selector
@36node/query-normalizr 的 selector 函数让我们可以更方便地访问规范化后的数据。selector 函数将两个参数传递给它：实体类型和实体 ID。使用这些参数，selector() 函数将返回该实体及其 ID下的所有属性。
使用指导意义
使用 @36node/query-normalizr 可以有效地管理大量的数据，并且可以避免在不同的项目部分中使用不同的数据格式。创建层次结构的数据结构可以更自然和直观地表现复杂的数据结构，同时也能够更好地提高处理数据的效率。
当然，这只是 @36node/query-normalizr 的一些优点。现在，您已了解了如何使用它来规范化数据，包括基本使用方法、示例代码、详细的解释以及它的使用指导意义。希望这篇文章对于你可以有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155220