mock.js

http://mockjs.com/
https://github.com/nuysoft/Mock/wiki

為了完成angularjs的karma測試，看到這個好東東，這貨能攔截ajax然后返回模擬數據，在后端接口沒完成的情況寫，這不是很贊么？

轉自： http://www.angularjs.cn/A0I4

概述

首先啦，我不認識mock.js的作者，帶着需求找到mock.js讓我覺得很驚艷。
相對於其他同類的框架的實現，mock.js超出了我的意料。

1. 基於 數據模板 生成模擬數據。
2. 基於 HTML模板 生成模擬數據。
3. 攔截並模擬 ajax 請求。

是的，mock.js只做上述的幾件事，但做的足夠出色。

解決的問題

開發時，后端還沒完成數據輸出，前端只好寫靜態模擬數據。

數據太長了，將數據寫在js文件里，完成后挨個改url。
某些邏輯復雜的代碼，加入或去除模擬數據時得小心翼翼。
想要盡可能還原真實的數據，要么編寫更多代碼，要么手動修改模擬數據。
特殊的格式，例如IP,隨機數，圖片，地址，需要去收集。
超爛的破網速..
...
以上都不再是問題

接下來體驗 攔截ajax請求並返回模擬數據。

步驟1 - 安裝

安裝太簡單，跳過

步驟2 - 配置模擬數據

Mock.mock('http://g.cn', {
    'name'       : '@name()',
    'age|1-100': 100,
    'color'       : '@color'
});

步驟3 - 發送ajax請求(jquery版)

$.ajax({
    url: 'http://g.cn',
}).done(function(data, status, xhr){
    console.log(
        JSON.stringify(data, null, 4)
    )    
})

步驟4 - 查看響應的結果

// 結果1
{
    "name": "Elizabeth Hall",
    "age": 91,
    "color": "#0e64ea"
}

// 結果2
{
    "name": "Michael Taylor",
    "age": 61,
    "color": "#081086"
}

// 結果N ..

結尾

演示： mock-demo

演示： mock-angular-demo