建立前端數據模型，vue開發必備

後端的數據都是有對象的，那前端需不須要呢，很是須要！！！
其實，這個庫，咱們已經用了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: codepen.io/vvpvvp/pen/…

場景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

www.heyui.top