【JS】在 Vue 中使用 Struct

Z时代
2024-01-10
分类：技术分享

我发现在 Vue 中使用 Struct 能够解决一直困扰我的几个最直接的问题。

数据结构复用问题，避免复制粘贴样板代码。

简单、快速的模拟数据，并且非常方便在正常数据和模拟之间切换。

方便设置字段的初始值，不用每次用到都再赋值一次。

让字段具有类型语义，这样我一眼看过去，就能很清晰的知晓某个结构到底是干什么的了。

一步到位，直接初始化包含多层子结构的完整结构。

解决上述问题，只用 Struct 最基本功能就可以了，暂不深究其他能力，不然内容着实有些多，滔滔不绝~~~

我们就先入个门吧。想要掌握更多能力的同学请移步：
https://rainforesters.github....

在 Vue 中使用 Struct

我们用可复用的字段类型，来定义某一组件所特有的数据结构。
允许字段有对应的初始值。
可以使用模拟数据，并能简便切换回正常数据。

直接上代码来预览一下。

// user.vue 用来展示用户信息
// 引入 rainforest-js
import { wrapval, typedef, typeinit } from 'rainforest-js'
// 引入已经定义好的类型描述，我们可以复用它们
import { Id, Name, Sex, Birthday, Avatar } from './libtypes'
export default {
data() {
// 定义数据结构
const UserStruct = typedef({
id: Id,
name: Name,
sex: Sex,
birthday: Brithday,
avatar: Avatar,
})
// 初始化数据结构，字段都会初始化为对应类型的初始值
// return typeinit(UserStruct)
// return typeinit(UserStruct, {
//   name: 'Amy', // 不使用初始值，直接赋值
// })
// or
// 可选的，使用 wrapval({ '@mock': true }) 来切换模拟数据
return typeinit(UserStruct, wrapval({ '@mock': true }))
// return typeinit(UserStruct, wrapval({ '@mock': true }, {
//   name: 'Amy', // 不使用模拟值，直接赋值
// }))
},}

如上所示，写法和以往的普通 data 没有什么大区别，复用性和语义性大大提高了，字段初始值也不必每次都进行赋值，切换模拟数据也非常方便。

// comment.vue 用户评论
// 引入 rainforest-js
import { wrapval, typedef, typeinit, int32 } from 'rainforest-js'
// 引入已经定义好的类型描述，我们可以复用它们
import { Id, Name, Avatar, Text } from './libtypes'
export default {
data() {
const CommentStruct = typedef({
user: typedef({
id: Id,
name: Name,
avatar: Avatar,
}),
text: Text,
id: Id,
praise: int32,
})
return typeinit(CommentStruct, wrapval({ '@mock': true }))
},}

如上所示，我们实实在在的复用了一把相同的字段类型，省了不少事，代码也很漂亮。

可以积累沉淀的类型库

在前面的代码中可以看到，我们定义了通用的类型库，这让我们可以复用很多类型。
随着日常开发，我们可以非常简单的不断积累沉淀各种类型，这样当再次使用时就不要太方便了，好伐。

// libtypes.js
import {
wrapval,
typedef,
typeinit,
bool,
int32,
float64,
string,
} from 'rainforest-js'
// 可以使用任意你熟悉的模拟框架
import { mock } from 'mockjs'
// Id 依然是一个 string 类型
export const Id = typedef({
'@type': string, // 待修饰的类型，所以 Id 是 string 的修饰类型，依然是 string
'@mock': () => mock('@id'), // 可选，如果没有则使用类型的默认初始值
})
export const Name = typedef({
'@type': string,
'@mock': () => mock('@name'),
})
export const Sex = typedef({
'@type': string,
'@mock': () => (Math.random() > 0.5 ? 'male' : 'female'),
'@value': () => 'unknown', // 可以自定义 string 的默认初始值，很酷吧
})
export const Birthday = typedef({
'@type': string,
'@mock': () => mock('@date'),
'@value': () => '2000-01-02',
})
export const Avatar = typedef({
'@type': string,
'@mock': () => mock('@image("120x120")'),
'@value': () => 'https://example.com/default-avatar.png',
})
export const Text = typedef({
'@type': string,
'@mock': () => mock('@sentence(5)'),})