modeljs
简单高效的 JS 数据模型定义库,帮助前后端数据结构轻松解耦,提高程序健壮性 💪💪💪
Intro
随着SPA应用的兴起,前后端分离的开发模式大行其道,使得前后端各司其职,大大减少了沟通协作成本。大多数情况下前端只需调用后端的接口将数据使用合适的方式直接展现出来,然后接受用户输入直接调用接口传入后端。这种方式在参与人数少的中小型项目并没有什么问题,但随着项目越来越大,模块越来越复杂,参与人员也越来越多,这种模式也呈现出越来越多的弊端:
- 匿名业务对象使得应用内流转的数据处于一种不透明的状态,稍有不慎就可能引发程序崩溃
- 匿名业务对象在不同页面需要重新定义,代码复用率低,且标准不统一
- 前后端在接口层面的耦合也使得接口的变更对前端影响范围越来越不可控,造成了新的协作成本
- 为了保证程序健壮性,前端不得不在任何用到接口数据的地方编写更多无聊的防御性代码
因此使用模型化来规范前端的业务对象对于某些项目来说很有必要。
modeljs 是一个简单高效的 JS 数据模型定义库,可以帮助前端轻松的定义好应用业务模型,同时提供简洁的 API 来进行前后端接口数据双向映射,使前后端在数据结构层面获得一定程度的解耦,从而提高程序可靠性。
Featrues
- 轻松定义应用业务模型
- 支持后端接口数据双向映射
- 支持复杂模型嵌套(实例嵌套、数组嵌套)
- 支持集中化模型数据验证(modeljs-validator 插件)
Plugns
- 模型数据验证插件:modeljs-validator
Install
npm install modeljs-core --save
Usage
模型定义:User.js
// ======== 定义模型 ========const User = Model// ======== 可使用原型扩展自定义方法 ========Userprototype {let data = await httpthisreturn this}Userprototype {let data = thisreturn await http}
基本使用
// ======== 实例化 ========var user =id: 100name: 'Charles Lo'companyName: 'XX公司'console // 100console // Charles Loconsole // XX公司// ======== 使用自定义方法 ========var user = id: 101await userconsole // 张三username = '李四'await userconsole // 李四
接口数据映射
// 实例化var user =// ======== 正向映射 ========var data = await http// data 的结构:{ uuid: 101, name: '张三', company: { name: '张三的公司' } }userconsole // 101console // 张三console // 张三的公司// ======== 批量正向映射 ========var data = await http// data 的结构:[{ uuid: 101, name: '张三', company: { name: '张三的公司' } }, ...]var users = Userconsole // 101console // 张三console // 张三的公司// ======== 反向映射 ========var user =id: 101name: '张三'companyName: '张三的公司'var data = user// data 的结构:{ uuid: 101, name: '张三', company: { name: '张三的公司' } }await http// ======== 批量反向映射 ========var users = Uservar data = User// data 的结构:[{ uuid: 100, name: 'Charles Lo', company: { name: 'XX公司' } }, ...]await http
复杂模型嵌套
// ======== 定义嵌套模型 ========// 定义公司模型const Company = Model// 定义订单模型const Order = Model// 定义客户模型const Customer = Model// ======== 使用嵌套模型 ========var data1 = await http/*data1 的结构:{id: 101,name: '张三',company: { id: 100, name: '张三的公司', address: '深圳'},orders: [{id: 1, product_name: '伊利牛奶', created_time: '2019-12-25 13:48:26'}, ...]}*/// 将接口数据转换为模型实例var customer =console // 101console // 张三console // { uuid: 100, name: '张三的公司', address: '深圳'}console // [{id: 1, productName: '伊利牛奶', createdTime: '2019-12-25 13:48:26'}, ...]// 将模型实例转换为接口数据var data2 = customer// data2 的结构同 data1
API
/*** 安装插件* @param* @param*/Model/*** 定义模型* @param* @param* @return*/const ModelClass = Model/*** 创建模型对象* @param* @return*/var model = ModelClass// 等同于var model = values/*** 批量创建模型对象* @param* @return*/var models = ModelClass/*** 从 api 数据对象转换为模型对象* @param* @return*/model// 等同于var model = ModelClass/*** 将模型对象转换为 api 数据对象* @return*/var data = model// 等同于var data = ModelClass/*** 从 api 数据对象集合批量创建模型对象集合* @param* @return*/ModelClass/*** 将模型对象集合批量转换为 api 数据对象集合* @param* @return*/var dataSet = ModelClass
如果对你有用,欢迎 star ^_^