后端的数据都是有对象的,那前端需不需要呢,非常需要!!!
其实,这个库,我们已经用了2年了。
我们将前端所有使用的业务数据模型都定义出来了。
那在实际应用中,有什么用处呢?
减少了无数的冗余代码,避免了非常多容易产生的bug。
我们已经没有出现过什么提交接口,日期忘记转换的问题了?
也没有出现过什么因为数据缺失,导致页面报错的问题,比如一些:{{user.org.title}}这种展示。
话不多说,把模型工具甩出来吧:
javascript model
通过以下方式即可安装使用
npm install js-model --save
分享一下链接地址:
- npm: js-model
- github: vvpvvp/model
同时,这里用到的日期格式工具是manba,日期format格式可以参考manba的文档。
- npm: manba
- github: vvpvvp/manba
其他先不说,先把我们的应用说一下吧。
以下场景使用vue为示例
场景1 :详情页面
原始页面
<script>
export default {
data () {
return {
obj: null,
}
}
}
</script>
<template>
<div>
<span v-if="obj">{{obj.a}}</span>
<span v-if="obj&&obj.a">{{obj.a.b}}</span>
<span v-if="obj.c">{{obj.c}}</span>
</div>
</tempalte>
问题:对象值初始定义欠缺。
使用model
Detail.js
export default new Model({
a: {
b: String
},
c: Number
})
<script>
import Detail from './Detail'
let obj = Detail.parse({});
</script>
<template>
<div>
<span>{{obj.a}}</span>
<span>{{obj.a.b}}</span>
<span>{{obj.c}}</span>
</div>
</tempalte>
其中
//obj的结果为
{
a: {
b: null
},
c: null
}
vue简单的demo: https://codepen.io/vvpvvp/pen/jpEjwW
场景2: 编辑数据
原始页面
<script>
let a = {int: 1}
//使用这种方式赋值,vue会没有办法更新a.date, a.money这样的数据
</script>
<template>
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
</tempalte>
使用model
Edit.js
export default new Model({
int: Number,
date: {
type: Date,
format: 'YYYY-MM-DD' //此处使用manba日期工具
},
money: {
type: Number,
unit: Model.W
}
})
<script>
import Edit from './Edit'
let a = Edit.parse({int: 1});
//在vue的v-model或者其他地方,可以直接引用a.date等数据。
</script>
<template>
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
</tempalte>
其中
//a的结果为
{
int: 1,
date: null,
money: null
}
场景3:数据转换
原始页面
<script>
//js
let a = {int: 1, date: 1522302335544, money: 10000};
if (a.data) {
a.date = format(a.date); //为了编辑的展示
}
if(a.money){
a.money = a.money / 10000;
}
//为了编辑的单位,顺便说一下,我们的金额在数据都是存储以元为单位的。
//提交的时候
if (a.int) {
a.int = parseInt(a.int)
}
if (a.data) {
a.date = new Date(a.date).getTime();
}
if(a.money){
a.money = a.money * 10000
}
//submit
</script>
<template>
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
</tempalte>
使用model
<script>
import Edit from './Edit';
let a = Edit.parse({int: 1, date: 1522302335544, money: 10000});
//提交的时候
let data = Edit.dispose(a);
</script>
//template
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
其中
<script>
//a的parse结果为
=============
{
int: 1,
date: "2018-03-29",
money: 1
}
=============
//提交的时候
let data = Edit.dispose(a);
// 将空值删除,按照格式转换出标准化的数据,还有更多的配置选项可以选择。
// 如果数据无变更,将转换为:{int: 1, date: 1522302335544, money: 10000}
// 如果编辑的数据为{int: "1", date: null, money},将转换为:{int: 1}
// 上面的int会通过输入框编辑变成String
</script>
看到上面三个场景,相信你应该清楚我们的javascript数据模型是做什么用的了。
js-model方法
-
parse:
- 创建完整对象数据,让你摆脱{{a&&a.b?a.b.c:’’}}这种无聊的判断了
- 数据标准化转换,当数据从后台传输过来的时候,日期是时间戳,金额是以元为单位,parse方法是帮你转换时间戳至时间字符串,金额以一定单位转换好,并且可以帮助你补全好所有的字段。
-
dispose:
- 当你需要把数据传送至后台之前,把日期转换成时间戳,把金额转换为以元为单位的数额,标准化数据格式,删除为空的数据。
例:通过input修改的数值为String, 通过dispose转换成数字格式。
最后
希望大家多多支持我们的组件库HeyUI
HeyUI,🎉UI Toolkit for Web, Vue2.0
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: vvpvvp 原文链接:https://juejin.im/post/6844903635537625095