javascript數據模型，前端開發必備

以下場景使用vue為示例

場景1 ：詳情頁面，展示非常多信息。

原始頁面

//jslet a = { a: 1, ds: [{a: {c: "12"}}]}//template
 {{a.a}} {{a.b.c}} {{d.a&&d.a.b}} {{d.a&&d.a.c}} {{e.a&&e.a.b}}

問題：後端不傳遞沒有值的數據，或者深層的對象沒有值。

使用model

//jslet 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
 {{a.a}} {{a.b.c}} {{d.a.b}} {{d.a.c}} {{e.a.b}}

原始頁面

//js//返回數據1let a = {int: 1} //使用這種方式賦值，vue會沒有辦法更新a.date這樣的數據，我不知道大家是怎麼解決的。//返回數據2let 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 * 10000submit//template
  
  萬

使用model

//jslet Edit = new Model({ int: Number, date: { type: Model.DATE, format: 'YYYY-MM-DD' //此處使用manba日期工具 }, money: { type: Model.MONEY, unit: Model.W }})//返回數據1let a = Edit.parse({int: 1});//a的結果為============={ int: 1, date: null, money: null}=============//在vue的v-model或者其他地方，可以直接引用a.date等數據。//返回數據2let 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會通過輸入框編輯變成Stringsubmit//template
   萬

看到上面兩個場景，相信你應該清楚我們的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轉換成數字格式。

閱讀更多 前端小學生 的文章

關鍵字: 場景 技術 JavaScript