后端的数据都是有对象的，那前端需不需要呢，非常需要！！！
其实，这个库，我们已经用了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

http://www.heyui.top