mg中大奖视频

書名：前端跨界開發指南：JavaScript工具庫原理解析與實戰
作者名：史文強
本章字數： 2824字
更新時間： 2022-08-12 16:06:18

1.3　使用Mock.js

Mock.js[1]是使用JavaScript語言生成測試數據的第三方庫，它能用一套相對規范的模板語法讓開發者自行定制測試數據的結構，然后根據模板生成用于測試的數據。Mock.js不僅可以使用類似于“@date”“@cname”這樣的模板占位符來生成時間和中文姓名等特殊的測試數據，而且可以編寫自定義的擴展占位符來生成需要的測試數據，更方便的是，僅僅使用簡單的標記符就可以生成大量結構重復的測試數據。如果你使用過任何SPA（Single Page Application，單頁面應用）框架，就不難聯想到Mock.js與“*ngFor”“v-for”這類用于生成重復結構的模板語法如出一轍。

1.3.1　Mock.js的語法規范

Mock.js的語法規范可以分為數據模板定義規范和數據占位符定義規范，規范的詳細內容可以在項目GitHub倉庫的wiki頁中查看和學習。

1. 數據模板定義規范

數據模板中的每個屬性均由3部分構成：屬性名、生成規則和屬性值。數據模板的格式如下：

"<name>|<rule>": <value>

這個簡單的規則會依據value的類型將rule解釋為不同的編譯規則。例如，當value的類型為number時，rule的不同寫法可以最終生成指定范圍內的整數，或者指定范圍和小數位數的浮點數；而當value的類型為Array時，rule的不同寫法可以最終生成數組中的某一項，或者是將value重復若干次后得到的新數組。或許這些規則最初會讓人感到很煩瑣，但實際上在手動模擬2～3個接口的響應之后，絕大多數開發人員很容易掌握其中的規律。

2. 數據占位符定義規范

占位符是寫在屬性值字符串中的，在最終生成數據時，會依據定義替換為對應的內容。數據占位符的格式如下：

'name|rule': '@占位符'
'name|rule': '@占位符（參數[,參數]）'

Mock.js內置的占位符可以生成常見的字符串，諸如姓名、時間、地址、段落、指定大小的圖片鏈接、符合某個正則表達式的字符串等，只需要在數據模板的value字段處使用“@[keywords]”的形式進行聲明即可。同時，Mock.Random命名空間下也提供了與占位符同名的生成函數，開發人員可以根據自己的需求編寫新的占位符。

拓展知識

將同類別的方法集中到命名空間下是一種非常好的編程習慣，因為這樣做可以避免全局環境的污染。瀏覽器腳本的全局環境是一個無限制的命名空間，你掛載在全局環境中的方法有可能會覆蓋其他人的同名方法，也有可能被后來的開發人員所編寫的函數覆蓋。可怕的是，這樣的覆蓋并不是語法錯誤，所以你的程序有可能并沒有報錯，而最終的業務邏輯卻出現了與預期不符的結果，這種情況下的調試往往會非常困難。初級開發人員應該從最初學習編程時就培養良好的習慣，獨立的命名空間意味著如果你的代碼寫得很好，那么其他開發人員可以直接引入以進行復用；如果你的代碼寫得不夠好，或者最終由于業務邏輯變更而失效，那么你也可以很輕松地用新的函數替代它。

1.3.2　Mock.js實戰

Mock.js支持在瀏覽器環境和Node.js環境中使用。在瀏覽器中，Mock.js既可以使用<script>標簽直接引入，也可以使用諸如require.js等符合AMD規范的包管理庫進行加載；在服務端Node.js環境中，通過“npm install mockjs”命令安裝依賴項并引入該模塊即可。引入Mock.js后，就可以在本地Web服務中監聽對應的請求并返回虛擬數據了。起初，前端開發人員可能需要對照后端開發人員提供的接口文檔來手動定制測試數據，盡管Mock.js可以方便地生成序列數據，但如果業務數據的結構本身就很復雜，那么手動構造數據依然是一件效率低下的事情。如果熟悉Node.js應用開發，可以嘗試編寫一些自動化工具來完成上面的工作，這樣就可以根據后端接口文檔中的定義直接自動生成Mock數據模板，從而提高工作效率。待接口數量逐漸增多，這樣做的好處就會體現出來，自動化工具可以很方便地實現批量接口回歸測試和健康度檢查等工程任務。下面就通過兩個實例來介紹Mock.js最常見的使用場景。

實例1：請求/get_userinfo接口時返回模擬的用戶信息

Mock.mock('/get_userinfo','GET',{
    'status|1':true,                      //標識請求是否成功，返回true的概率是1/2
    'message':'@csentence',               //請求失敗時返回錯誤信息，使用占位符返回中文句子
    'data':{                            
        'id|1-20':0,                      //id為1～20之間的整數，0表示返回值為數字類型
        'nickname' : '@ctitle',           //昵稱使用中文標題占位符
        'realname' : '@cname',            //實名使用中文名稱占位符
        'birthday' : '@date',             //生日使用日期占位符
        'signature' : '@csentence',       //簽名使用中文語句占位符
        'address' : '@county(true)',      //城市占位符轉譯格式為'陜西省 西安市'
        'email' : '@email',               //郵箱使用郵箱占位符
        'openId' : '@word(28)',           //生成28位字符串模擬ID
        'avatar' : '@dataImage(200x100)', //生成尺寸為200×100的頭像圖片鏈接
        'account' : '2000-3000.2':1,      //賬戶余額整數部分為2000～3000，小數點后保留2位
    }
})

當程序向“/get_userinfo”接口發送GET請求時，會得到Mock.js利用上述模板編譯出的結果，注意，每次返回的結果都是不同的，但是都符合模板的格式，示例如下：

{
    status:true,
    message: '是真總為開土子于放對又際因。',
    data:{
        id:8,
        nickname:'院爭議',
        realname:'張靜',
        birthday:'1092-02-18',
        signature:'話經做技展使放至又太色委可每',
        address:'陜西省 西安市',
        email:'cgqqwjb@uaqfy.ev',
        openId:'ahtisldienkdsdfwieurnslidnfg',
        avatar:'http://dummyimage.com/125x125',
        account:2048.12
    }
}

實例2：請求/get_orders接口返回模擬的訂單列表

Mock.mock('/get_orders', 'GET',{
    'status|1':true,                                //標識請求是否成功，返回true的概率是1/2
    'message':'@csentence',                         //請求失敗時返回錯誤信息，使用占位符返回中文句子
    'data|4':{                                      //將返回數組，數組包含4個具有相同格式的對象
        'id|+1':0,                                  //id為從0開始的自增整數
        'create_time':'@datetime',                  //創建日期使用日期時間占位符
        'request_price|2000-3000.2':0,              //應收金額整數部分為2000～3000，小數點后保留2位
        'pay_price|1000-2000':0,                    //實付金額為1000～2000之間的整數
        'status|1':['已支付','已發貨','已收貨']        //訂單狀態為數組中的某一項
    }
})

當程序向“/get_orders”接口發送GET請求時，會得到一個數組型的有效數據，其格式如下：

{
    status:true,
    message:'這里僅僅給出一定長度的文字。',
    data:[{
        id:0,
        create_time:'1990-08-12 12:00:23',
        request_price:2048.10,
        pay_price:1050,
        status:'已支付'
    },{
        id:1,
        create_time:'2010-09-12 14:00:50',
        request_price:2400.10,
        pay_price:1250,
        status:'已收貨'
    },{
        id:2,
        create_time:'1998-01-01 12:00:23',
        request_price:2128.40,
        pay_price:1050,
        status:'已收貨'
    },{
        id:3,
        create_time:'2018-08-12 20:00:23',
        request_price:2648.10,
        pay_price:1800,
        status:'已支付'
    }]
}

1.3.3　自定義擴展

Mock.js官方提供了大量基礎且常用的占位符，但很多隨機生成的數據都是無意義的，僅僅是為了在調整樣式的時候更方便一些。在日常開發中，我們極有可能需要向客戶或非技術人員進行階段性的功能演示，一些貼近真實場景的虛擬數據能夠有效地降低非技術人員的理解難度以及溝通成本。此時，我們就可以利用Mock.js提供的自定義擴展接口定制符合開發需求或業務邏輯的占位符。Mock.js中提供了Mock.Random.extend方法來擴展占位符，該方法作為占位符時，會從給定的枚舉項中隨機選取某一項來生成數據。下面通過一個示例來說明，我們通過添加一個占位符@car來獲得一些靜態的汽車信息，示例代碼如下：

Mock.Random.extend({
    car: function(){
        var cars = ['大眾', '別克', '勞斯萊斯', '保時捷', '邁巴赫', '公交車'];
        return this.pick(cars);
    }
});

添加上述代碼后，我們就可以在模板中使用@car占位符獲得一些車輛信息了。

拓展知識

階段性的功能演示是開發過程中的常見環節，千萬不要直接以開發中的版本向非技術人員做功能演示，對于代碼開發的進度，非技術人員通常是沒有直觀感受的，那些在開發人員眼里3～5分鐘就可以完善的細節，在非技術人員看來可能與最終結果存在非常大的差距，從而引發其對開發人員工作質量的質疑。比如，一個需要展示橫幅廣告（Banner）圖片的地方，如果展示的是一幅無關的圖片，那么在技術人員看來完成度已很高，只需要等設計師給出橫幅廣告的圖片直接替換就可以了；但如果演示的時候展示的是一個灰色的矩形，非技術人員可能就會認為代碼開發工作還沒開始做，因為他們可能無法評估“把灰色矩形替換為橫幅廣告圖片”所對應的工作量，他們更傾向于認為灰色矩形和圖片是兩種完全不同的東西。所以哪怕使用Mock數據，也請讓對外演示的產品盡量貼近真實的樣子。觀看演示的人給出的反饋很有可能會對項目甚至你未來的職業發展產生影響，你需要讓別人理解自己正在做的事情進展如何，如果已經做了90分的工作，就不要用一個看起來只有60分的演示來呈現。

[1]官網地址：http://mockjs.com/。

官术网_书友最值得收藏!

前端跨界開發指南：JavaScript工具庫原理解析與實戰

1.3 使用Mock.js

1.3.1 Mock.js的語法規范

1.3.2 Mock.js實戰

1.3.3 自定義擴展

1.3　使用Mock.js

1.3.1　Mock.js的語法規范

1.3.2　Mock.js實戰

1.3.3　自定義擴展