建立前端資料模型，vue開發必備

vvpvvp發表於2018-07-09
前端模型Vue

後端的資料都是有物件的，那前端需不需要呢，非常需要！！！
其實，這個庫，我們已經用了2年了。

建立前端資料模型，vue開發必備

我們將前端所有使用的業務資料模型都定義出來了。
那在實際應用中，有什麼用處呢？
減少了無數的冗餘程式碼，避免了非常多容易產生的bug。

我們已經沒有出現過什麼提交介面，日期忘記轉換的問題了？
也沒有出現過什麼因為資料缺失，導致頁面報錯的問題，比如一些：{{user.org.title}}這種展示。

話不多說，把模型工具甩出來吧：

javascript model

通過以下方式即可安裝使用

npm install js-model --save
複製程式碼

分享一下連結地址：

同時，這裡用到的日期格式工具是manba，日期format格式可以參考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

相關文章