宣传一下自己封装的 NPM 库-处理 JSON 数据

2021-09-29 12:22:59 +08:00
 fewspider

开发的原因

前端处理 JSON 数据是最基本的一个需求,无论是啥框架,能够方便简洁地拿到数据,可以大幅度地方便开发

主要功能

处理一些 JSON 数据,拿不到值,取默认值,具体可以看 README.md

NPM 地址

https://www.npmjs.com/package/js-safe-json

3829 次点击
所在节点    程序员
26 条回复
xieqiqiang00
2021-09-29 12:28:28 +08:00
这种需求有点不理解
tinkerer
2021-09-29 12:42:10 +08:00
这也要发个库么...
hyy1995
2021-09-29 12:45:23 +08:00
我愣住……
pansongya
2021-09-29 12:51:15 +08:00
有用 不过应该是后端做的事
masterclock
2021-09-29 12:55:51 +08:00
coolcoffee
2021-09-29 12:56:10 +08:00
首先,我这边第一反应就是为什么不用 lodash 的_.get 。

其次,我觉得取值之前都要已经知道是什么类型,而且要执行对应类型的取值方法:fetchString 、fetchBoolean 等,那我为什么不_.get("a.b.c") || false 或者 _.get("a.b.c") || "",大不了在使用比较过程中再用"!!"或者"+" 转换一下类型。

最后就是,这年头没 typescript 就算了,但是不能没有 type.d.ts ;

最最重要的一点就是,直接全量引入了一个 underscore,这个是很难接受的。 虽然您这边打包出来才几 kb,那是因为是用的 esm,没办法直接在 js 上使用。
kekxv
2021-09-29 12:57:25 +08:00
为什么不用||?
let number = json.number || 0;
LancerComet
2021-09-29 13:00:23 +08:00
@xieqiqiang00 JSON 正反序列化器最重要的意义是保证类型安全,然后在此基础上加一些工程特性,比如 JSON 字段与 Model 字段名称映射,规则校验等

但对于切图仔来讲有点尴尬的是,JS 如果要做类型安全,那么 API 设计的就比较丑陋,一般需要声明一个 Schema,然后人工维护字段关系,这样就比较繁琐,而且代码不是那么随意抽插;如果要学习类似 JSON.NET 的声明式注解,虽然 API 会好看很多,感觉有点像 AOP,但项目一定要上 TypeScript 并且打开 emitDecoratorMetadata,因为要用到反射,但某些时候项目已经不能支持,或者类似 Vite 这样 ESBuild 的工具链,如果为了这一个特性就大动干戈就比较难受.

我觉得切图仔对 JSON 正反序列化器也是有需求的,我自己仿造 JSON.NET 的 API 做了一个序列化器,然后在公司项目中大规模使用了,公开的版本在这里 https://github.com/vuevert/Vert-Serializer,不过是需要 TS + 装饰器 + emitDecoratorMetadata 环境的.

这个我在项目里一般和数据访问层结合,然后 API 大概可能长这样:

```ts
@Serializable()
class User {
@JsonProperty()
name: string = ''

@JsonProperty('user_age') // 数据源字段名称可以和 Model 不一样,比如接口里为 user_age.
age: number = 0 // 如果接口返回的不是 number 则取 0 作为默认值.
}

function getUserData (id: string) {
return HttpService.get({
url: '/user',
data: {
id
},
type: User
})
}

getUserData('1') // Promise<User>
```

这样就可以直接把 JSON 变为 Model.

另外我个人喜欢在项目中将各个功能集成在 Model 上以便查找,避免分散代码:

```ts
@Serializable()
class User {
@JsonProperty()
@IsString(1, 20, '请填写用户名,长度在 1- 20')
name: string = ''

@JsonProperty('user_age')
@IsInt(0, 120, '请填写正确的年龄.')
age: number = 0 // 如果接口返回的不是 number 则取 0 作为默认值.
}
```

然后直接在视图中使用:

```tsx
const userValidator = getValidator(User)

<Textfield rules={userValidator.name} />
<Textfield rules={userValidator.age} />
```

这样视图中就不需要再额外写验证器逻辑了.

其实这些设计非常传统.
LancerComet
2021-09-29 13:01:23 +08:00
@LancerComet 格式炸了 😢
mritd
2021-09-29 13:02:24 +08:00
这是我硬盘最佩服 前端圈 的一点,每次 npm install 似乎都是一次海量小文件压测
Kilerd
2021-09-29 13:13:37 +08:00
啊这。。。。
towry
2021-09-29 13:25:45 +08:00
https://github.com/towry-archived/term-cursor

火钳刘明,宣传下我 N 年前下的一个 NPM 裤。。
fewspider
2021-09-29 13:38:36 +08:00
@coolcoffee 把 underscore 干掉了
lisongeee
2021-09-29 13:50:21 +08:00
怎么连个 .d.ts 都没有?
myCupOfTea
2021-09-29 14:17:08 +08:00
lodash 的 get
Yvette
2021-09-29 15:29:27 +08:00
xingguang
2021-09-29 17:58:11 +08:00
```js
function clone(obj) {
return JSON.parse(JSON.stringify(obj));
}

```
蚌埠住了
muzuiget
2021-09-29 19:22:49 +08:00
看上去就是取个默认值?

如果是服务端接受客户端发过来的不可信 JSON,可以定义 ajv.js.org 这种工具直接校验后,再取值使用。

况且现在 JS 有空值运算符了,连 lodash 这种省了,例如 a.b?.c?[1]?.d ?? 'default'。
mxT52CRuqR6o5
2021-09-29 19:25:06 +08:00
有标准里的 optional chaining 优先考虑用标准里的特性,不用 optional chaining 也会优先考虑 lodash 这种成熟的库
DOLLOR
2021-09-29 23:19:00 +08:00
@coolcoffee
_.get(object, 'a.b.c', 'default');

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/805117

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX