以下场景使用vue为示例
场景1 ：详情页面，展示非常多信息。
原始页面
//js
let a = {
a: 1,
ds: [{a: {c: "12"}}]
}
//template
<div>
<span>{{a.a}}</span>
<span v-if="a&&a.b">{{a.b.c}}</span>
<span v-if="a.ds" v-for="d of a.ds">{{d.a&&d.a.b}} {{d.a&&d.a.c}}</span>
<span v-if="a.es" v-for="e of a.es">{{e.a&&e.a.b}}</span>
</div>
问题：后端不传递没有值的数据，或者深层的对象没有值。
使用model
//js
let Detail = new Model({
a: Number,
b: { c: String },
ds: [ { a: { b: String, c: String } } ],
es: [ { a: { b: String } } ]
})
let a = Detail.parse({a: 1});
//a的结果为
=============
{
a: 1,
b: { c: null},
ds: [ { a: { b: null, c: "12" } } ],
es: []
}
=============
//template
<div>
<span>{{a.a}}</span>
<span>{{a.b.c}}</span>
<span v-for="d of a.ds">{{d.a.b}} {{d.a.c}}</span>
<span v-for="e of a.es">{{e.a.b}}</span>
</div>
场景2： 编辑数据
原始页面
//js
//返回数据1
let a = {int: 1} //使用这种方式赋值，vue会没有办法更新a.date这样的数据，我不知道大家是怎么解决的。
//返回数据2
let a = {int: 1, date: 1522302335544, money: 10000};
a.date = format(a.date); //为了编辑的展示
a.money = a.money / 10000; //为了编辑的单位，顺便说一下，我们的金额在数据都是存储以元为单位的。
//以上转换还需要判断是否为空值
//提交的时候
//以下转换还需要判断是否为空值
a.int = parseInt(a.int)
a.date = new Date(a.date);
a.money = a.money * 10000
submit
//template
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
使用model
//js
let Edit = new Model({
int: Number,
date: {
type: Model.DATE,
format: 'YYYY-MM-DD' //此处使用manba日期工具
},
money: {
type: Model.MONEY,
unit: Model.W
}
})
//返回数据1
let a = Edit.parse({int: 1});
//a的结果为
=============
{
int: 1,
date: null,
money: null
}
=============
//在vue的v-model或者其他地方，可以直接引用a.date等数据。
//返回数据2
let a = Edit.parse({int: 1, date: 1522302335544, money: 10000});
//a的结果为
=============
{
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
submit
//template
<div>
<input v-model="a.int"/>
<DatePicker v-model="a.date"/>
<input v-model="a.money"/>万
</div>
看到上面两个场景，相信你应该清楚我们的javascript数据模型是做什么用的了。 以下，我们就开始介绍了。
js-Model
通过以下方式即可安装使用
npm install js-model --save
分享一下链接地址：
- npm: js-modelgithub: vvpvvp/model
同时，这里用到的日期格式工具是manba，也是我自己写的哦，编写format格式可以参考manba的文档。
- npm: manbagithub: vvpvvp/manba
方法
parse
当数据从后台传输过来的时候，日期是时间戳，金额是以元为单位，数据是不全的，因为只传递了有值的数据。 parse方法是帮你转换时间戳至时间字符串，金额以一定单位转换好，并帮你补全好所有的字段。
补全了所有数据，让你摆脱{{a&&a.b&&a.b.c}}这种无聊的判断了
dispose
当你需要把数据传送至后台之前，把日期转换成时间戳，把金额转换为以元为单位的数额，标准化数据格式，删除为空的数据。
例：通过input修改的数值为String, 通过dispose转换成数字格式。
