JavaScript利用normalizr实现复杂数据转换
笔者曾经开发过一个数据分享类的小程序，分享逻辑上类似于百度网盘。当前数据可以由被分享者加工然后继续分享（可以控制数据的过期时间、是否可以加工数据以及继续分享）。
分享的数据是一个深度嵌套的 json 对象。在用户读取分享数据时存入小程序云数据库中（分享的数据和业务数据有差异，没使用业务服务器进行维护）。如果拿到数据就直接存储的话，很快云数据库就会变得很大，其次我们也没办法分析各项和检索各项子数据给予分享者。
这时候需要进行数据转换以便拆分和维护。我们可以使用 redux 作者 Dan Abramov 编写的 normalizr 来处理数据。
normalizr 创立的初衷是处理深层，复杂的嵌套的对象。
如何使用
稍微修改一下官方的例子，假定获取到如下书籍的数据：
{
id: "1",
title: "JavaScript 从入门到放弃",
// 作者
author: {
id: "1",
name: "chc"
},
// 评论
comments: [
{
id: "1",
content: "作者写的太好了",
commenter: {
id: "1",
name: "chc"
}
},
{
id: "2",
content: "楼上造假数据哈",
commenter: {
id: "2",
name: "dcd"
}
},
]
}这时候我们可以写出 3 个主体: 书籍信息、评论以及用户。我们先从基础的数据来构造模式：
import { normalize, schema } from 'normalizr';
// 构造第一个实体 用户信息
const user = new schema.Entity('users');
// 构造第二个实体 评论
const comment = new schema.Entity('comments', {
// 评价者是用户
commenter: user
});
// 构造第三个实体 书籍
const book = new schema.Entity('books', {
// 作者
author: user,
// 评论
comments: [comment]
});
// 传入数据以及当前最大的 schema 信息
const normalizedData = normalize(originalData, book);先来看一下最终数据。
{
"entities": {
"users": {
"1": {
"id": "1",
"name": "chc"
},
"2": {
"id": "2",
"name": "dcd"
}
},
"comments": {
"1": {
"id": "1",
"content": "作者写的太好了",
"commenter": "1"
},
"2": {
"id": "2",
"content": "楼上造假数据哈",
"commenter": "2"
}
},
"books": {
"1": {
"id": "1",
"title": "JavaScript 从入门到放弃",
"author": "1",
"comments": [
"1",
"2"
]
}
}
},
"result": "1"
}去除其他信息，我们可以看到获取了 3 个不同的实体对象, users，comments，books。对象的键为当前 id，值为当前平铺的数据结构。这时候我们就可以使用对象或者数组(Object.values) 来新增和更新数据。
解析逻辑
看到这里，大家可能是很懵的。先不管代码实现，这里先分析一下库是如何解析我们编写的 schema 的，以便大家可以在实际场景中使用，再看一遍数据和 schema 定义：
数据结构
{
id: "1",
title: "JavaScript 从入门到放弃",
// 作者
author: {
id: "1",
name: "chc"
},
// 评论
comments: [
{
id: "1",
content: "作者写的太好了",
commenter: {
id: "1",
name: "chc"
}
},
{
id: "2",
content: "楼上造假数据哈",
commenter: {
id: "2",
name: "dcd"
}
},
]
}书籍信息是第一层对象，数据中有 id, title, author, comments，对应 schema 如下
const book = new schema.Entity('books', {
// 作者
author: user,
// 一本书对应多个评论，所以这里使用数组
comments: [comment]
});其中 id ，title 是 book 本身的属性，无需关注，把需要解析的数据结构写出来。books 字符串与解析无关，对应 entities 对象的 key。
再看 user
const user = new schema.Entity('users');user 没有需要解析的信息，直接定义实体即可。
最后是评论信息
const comment = new schema.Entity('comments', {
// 评价者是用户
commenter: user
});
{
id: "1",
content: "作者写的太好了",
commenter: {
id: "1",
name: "chc"
}
}把 comments 从原本的数据结构中拿出来，实际也就很清晰了。
高阶用法
处理数组
normalizr 可以解析单个对象，那么如果当前业务传递数组呢？类似于 comment 直接这样使用即可：
[
{
id: '1',
title: "JavaScript 从入门到放弃"
// ...
},
{
id: '2',
// ...
}
]
const normalizedData = normalize(originalData, [book]);反向解析
我们只需要拿到刚才的 normalizedData 中的 result 以及 entities 就可以获取之前的信息了。
import { denormalize, schema } from 'normalizr';
//...
denormalize(normalizedData.result, book, normalizedData.entities);Entity 配置
开发中可以根据配置信息重新解析实体数据。
const book = new schema.Entity('books', {
// 作者
author: user,
// 一本书对应多个评论，所以这里使用数组
comments: [comment]
}， {
// 默认主键为 id，否则使用 idAttribute 中的数据，如 cid，key 等
idAttribute: 'id',
// 预处理策略, 参数分别为 实体的输入值， 父对象
processStrategy: (value, parent, key) => value,
// 遇到两个id 相同数据的合并策略，默认如下所示，我们还可以继续修改
mergeStrategy: (prev, prev) => ({
...prev,
...next,
// 是否合并过，如果遇到相同的，就会添加该属性
isMerge: true
}),
});
// 看一下比较复杂的例子，以 user 为例子
const user = new schema.Entity('users', {
}, {
processStrategy: (value, parent, key) => {
// 增加父对象的属性
// 例如 commenter: "1" => commenterId: "1" 或者 author: "2" => "authorId": "2"
// 但是目前还无法通过 delete 删除 commenter 或者 author 属性
parent[`${key}Id`] = value.id
// 如果是从评论中获取的用户信息就增加 commentIds 属性
if (key === 'commenter') {
return {
...value,
commentIds: [parent.id]
}
}
// 不要忘记返回 value, 否则不会生成 user 数据
return {
...value,
bookIds: [parent.id]
};
}
mergeStrategy: (prev, prev) => ({
...prev,
...next,
// 该用户所有的评论归并到一起去
commentIds: [...prev.commentIds, ...next.commentIds],
// 该用户所有的书本归并到一起去
bookIds: [...prev.bookIds, ...next.bookIds],
isMerge: true
}),
})
// 最终获取的用户信息为
{
"1": {
"id": "1",
"name": "chc"
// 用户 chc 写了评论和书籍，但是没有进行过合并
"commentIds": ["1"],
"bookIds": ["1"],
},
"2": {
"id": "2",
"name": "dcd",
// 用户 dcd 写了 2 个评论，同时进行了合并处理
"commentIds": [
"2",
"3"
],
"isMerge": true
}
}当然了，该库也可以进行更加复杂的数据格式化，大家可以通过 api 文档 来进一步学习和使用。
其他
当然了，normalizr 使用场景毕竟有限，开源负责人也早已换人。目前主库已经无人维护了(issue 也也已经关闭)。当然了，normalizr 代码本身也是足够稳定。
笔者也在考虑一些新的场景使用并尝试为 normalizr 添加一些新的功能(如 id 转换)和优化(ts 重构)，如果您在使用 normalizr 的过程中遇到什么问题，也可以联系我，存储库目前在 normalizr-helper 中。
到此这篇关于JavaScript利用normalizr实现复杂数据转换的文章就介绍到这了,更多相关JavaScript normalizr复杂数据转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
discuz中用到的js不论是多浏览器兼容性和实用性都是非常不错的，推荐大家看下2008-05-05
这篇文章主要介绍了详解webpack4多入口、多页面项目构建案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
网上二级（多级）联动的例子也不少，有各种不同的操作方法。我所采用的方法网上也应该有的，不过我还没有看到过。2010-07-07
2008-04-04
这篇文章主要介绍了JS数组去重的6种方法,结合完整实例形式总结分析了javascript针对数组去除重复项的相关原理与操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要给大家介绍了关于JavaScript split()方法定义及更多实例的相关资料,js里的split()方法大家都知道用于将字符串转化为字符串数组,文中通过代码实例介绍的非常详细,需要的朋友可以参考下2024-03-03
javascript实现粘贴qq截图功能（clipboardData）
这篇文章主要介绍了javascript实现粘贴qq截图功能，利用clipboardData在网页中实现截屏粘贴的功能，感兴趣的小伙伴们可以参考一下2016-05-05
优雅而高效的JavaScript try...catch语句详解(js异常处理)
这篇文章主要给大家介绍了关于JavaScript中try...catch语句的相关资料,也就是js异常处理方法,try...catch是JavaScript中的错误处理机制,它的作用是捕获和处理可能发生的错误,以避免程序崩溃,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了解决webpack多页面内存溢出的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
Bootstrap每天必学之按钮，本文讲解的就是大家最为常用的button按钮的样式，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论