@
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} />
```
这样视图中就不需要再额外写验证器逻辑了.
其实这些设计非常传统.