摘要：前言本文講述的數(shù)據(jù)模型并不是一個(gè)庫，也不是需要的包，僅僅只是一種在多人團(tuán)隊(duì)協(xié)作開發(fā)的時(shí)候擬定的規(guī)則。至少目前為止，我們的開發(fā)團(tuán)隊(duì)再也沒用過雖然一開始也沒用，也不用擔(dān)心后臺(tái)數(shù)據(jù)的字段或結(jié)構(gòu)發(fā)生變動(dòng)，真正實(shí)現(xiàn)前后臺(tái)并行開發(fā)的愉快模式。

本文講述的數(shù)據(jù)模型并不是一個(gè)庫，也不是需要npm的包，僅僅只是一種在多人團(tuán)隊(duì)協(xié)作開發(fā)的時(shí)候擬定的規(guī)則。至少目前為止，我們的開發(fā)團(tuán)隊(duì)再也沒用過mock（雖然一開始也沒用），也不用擔(dān)心后臺(tái)數(shù)據(jù)的字段或結(jié)構(gòu)發(fā)生變動(dòng)，真正實(shí)現(xiàn)前后臺(tái)并行開發(fā)的愉快模式。

本文技術(shù)棧有 Typescript、Rxjs、AngularX

類比于java里的類，我們的Model也是一個(gè)類，是TS的類，我們根據(jù)需求和設(shè)計(jì)圖或原型圖規(guī)劃好某一個(gè)具體的模塊的基類Model，并自行定義一些字段和枚舉類型，方法屬性等，并不需要強(qiáng)行和后臺(tái)的字段一致，要保證百分百純的前后端分離，舉個(gè)例子

比如開發(fā)某一個(gè)后臺(tái)管理項(xiàng)目，里邊有產(chǎn)品（Product）模塊、用戶（User）模塊等

那么我們會(huì)在model文件夾里定義BaseProduct的基類

export class BaseProductModel {
    constructor() {}
    // 必有id 和 name
    public id: number = null;
    public name: string = "";
    /...more.../
}

基類的定義是必要的，可以節(jié)省很多不必要的代碼，并不需要寫一個(gè)頁面或組件就重新定義新的model，如果某一個(gè)組件里面需要對(duì)這個(gè)產(chǎn)品的內(nèi)容進(jìn)行拓展的大可直接繼承，并不會(huì)影響其他有了這個(gè)基類的文件

我們推崇一切基類都必須繼承，不可直接構(gòu)造

真實(shí)的項(xiàng)目中產(chǎn)品的字段和屬性肯定不止只有id和name，可能還包含版本、縮略圖地址、唯一標(biāo)識(shí)、產(chǎn)品、對(duì)應(yīng)規(guī)格的價(jià)格、狀態(tài)、創(chuàng)建時(shí)間等等；這些屬性完全可以放在基類里，因?yàn)樗挟a(chǎn)品都有這些屬性，說到類型和狀態(tài)的定義，請(qǐng)注意

絕對(duì)不能將可枚舉性質(zhì)的屬性直接使用后臺(tái)或第三方返回的對(duì)應(yīng)屬性

比如，產(chǎn)品模塊里最基礎(chǔ)的狀態(tài)（status）屬性，假設(shè)后臺(tái)定義的對(duì)應(yīng)狀態(tài)有

0: 禁用
1: 啟用
2: 隱藏
3: 不可購(gòu)買

這四種，倘若我們?cè)陧?xiàng)目當(dāng)中直接使用這些對(duì)應(yīng)狀態(tài)的數(shù)字去判斷或進(jìn)行邏輯處理，分不分的清另談，如果中途或以后狀態(tài)的數(shù)字變了，GG?？赡艽蠹矣X得這樣的情況很少，但也不是沒有，一旦出現(xiàn)改起來BUG就一堆。

所以對(duì)于這種可枚舉性質(zhì)的屬性我們會(huì)定義一個(gè)枚舉類（Enum）

export enum EStatus {
    BAN = 0,
    OPEN = 1,
    HIDE = 2,
    NOTBUY = 3
}

然后在model里這樣

export class BaseProductModel {
    // ......
    public status: string = EStatus[1] // 默認(rèn)啟用
}

美滋滋，而且在進(jìn)行邏輯判斷的時(shí)候我們也不用去關(guān)心每個(gè)狀態(tài)對(duì)應(yīng)的數(shù)字是什么，我們只關(guān)心它是BAN還是OPEN，簡(jiǎn)潔明了不含糊

而且我們還可以給model增加一個(gè)只讀屬性，用來返回這個(gè)狀態(tài)對(duì)應(yīng)的中文提示（這種需求很常見）

public get conversionStatusHint() : string {
    const _ = { BAN: "禁用", OPEN: "啟用", HIDE: "隱藏", NOTBUY: "買不得呀" }
    return _[this.status] ? _[this.status] : ""
}

這樣就不用在每一個(gè)組件里面寫一個(gè)方法來傳參數(shù)返回中文名稱了

到了這里，我們的BaseProductModel已經(jīng)算是定義好了，下面我們就需要給這個(gè)model定義一個(gè)方法

目的是把后臺(tái)返回的字段和數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化為我們自己定義的字段和數(shù)據(jù)結(jié)構(gòu)

可能到了這里很多人會(huì)覺得這是多此一舉，后臺(tái)都直接返回?cái)?shù)據(jù)了還轉(zhuǎn)化什么，返回什么用什么就得了。
但在大型的團(tuán)隊(duì)開發(fā)項(xiàng)目當(dāng)中，誰也不能保證一個(gè)字段也不修改，一個(gè)字段也不刪除或增加或缺失，牽一發(fā)動(dòng)全身。人生苦短。而且還有一種情況就是，可能這個(gè)項(xiàng)目是前端先進(jìn)行，后臺(tái)還未介入，需要前端這邊先把整體的功能和樣式都先根據(jù)設(shè)計(jì)圖規(guī)劃開發(fā)。

export class BaseProductModel {
    // ......
    // 轉(zhuǎn)化后臺(tái)數(shù)據(jù)
    public setData( data: BaseProductModel ): void {
        if (data) {
            for (let e in this) {
                if ((