mock使用心得總結

首先說一下什麼是mock.

一、mock是一個模拟資料生成器，旨在幫助前端獨立于後端進行開發，幫助編寫單元測試。mock有如下功能

• 根據資料模闆生成模闆資料
• 模拟ajax請求，生成請求資料
• 基于html模闆生成模拟資料

二、如何安裝mock(内容摘錄):

傳送門：https://github.com/nuysoft/Mock/wiki/Getting-Started

Node (CommonJS)

# 安裝
npm install mockjs
           

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
    'list|1-10': [{
        // 屬性 id 是一個自增數，起始值為 1，每次增 1
        'id|+1': 1
    }]
})
// 輸出結果
console.log(JSON.stringify(data, null, 4))
           

Bower

# 安裝
npm install -g bower
bower install --save mockjs
           

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
           

RequireJS (AMD)

// 配置 Mock 路徑
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加載 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 輸出結果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})
           

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}
           

JSFiddle

Sea.js (CMD)

因為 Sea.js 社群尚未提供 webpack 插件，是以 Mock.js 暫不完整支援通過 Sea.js 加載。

一種變通的方式是，依然通過 Sea.js 配置和加載 Mock.js，然後通路全局變量 Mock。

// 配置 Mock 路徑
seajs.config({
    alias: {
        mock: 'http://mockjs.com/dist/mock.js'
    }
})

// 加載 Mock
seajs.use('mock', function(__PLACEHOLDER) {
    // 使用 Mock（全局變量）
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})
           

JSFiddle

Random CLI

# 全局安裝
$ npm install mockjs -g

# 執行
$ random url
# => http://rmcpx.org/funzwc

# 幫助
random -h
           

三、mock寫接口，以下示例圖

一些模拟正規表達式：

@mock=function() {return this.retCode==="SUCCESS" ? "操作成功":"操作失敗";}  === retMsg 

@mock=$order('SUCCESS','FAIL') === retCode

@[email protected](100000000,999999999)  ===編碼格式

@[email protected](0,1000,0,4)    === 浮點資料，金額

@[email protected]([-1,0,1,2])  === 狀态

@[email protected]("yyyy-MM-dd")   === 日期

@[email protected](2,24)  ===名稱