玩轉【Mock.js】,前端也能跑的很溜

如今開發已是先後端分離了，前端和後端能夠同時進行開發，互不影響，可是有些時候後端開發的接口慢於前端，致使前端須要等待後端的接口完成才能完成先後端對接，爲了解決這個痛點，出現了模擬接口數據的方案，目前行業中主要有四種方案來模擬後端放回的數據：

• 暴力式，直接在前端代碼中寫入模擬數據，可是這種缺點很明顯，改變了代碼的原有邏輯，嵌入式太深，耦合性搞
• 攔截式，這就是本文主要推薦的方式，經過攔截ajax請求，而後重定向到項目中的某個js文件，從js文件中獲取各類僞造的數據
• Mock Server，就是搭建一個Mock服務器來模擬數據，根據這個服務器來生產須要的接口數據，很顯然這種成本有點高，不適合任何人，特別是大型的團隊，文檔的編寫，接口的變動，通知到每個人，代價就比較大了
• Mock 平臺，好比市面上RAP，可是須要後端使用他，未必全部的後端都願意使用他

Mock.js：生成隨機數據，攔截 Ajax 請求，Mock.js 經過覆蓋和模擬原生 XMLHttpRequest 的行爲來攔截 Ajax 請求，「轉發」到本地文件，所謂轉發，其實就是讀取本地 mock文件，並以json或者script等格式返回給瀏覽器。

Mock.js具備如下幾個特色：

• 讓前端攻城師獨立於後端進行開發,先後端能夠同時進行。
• 不須要修改既有代碼，就能夠攔截 Ajax 請求，返回模擬的響應數據。
• 支持生成隨機的文本、數字、布爾值、日期、郵箱、連接、圖片、顏色等。
• 經過隨機數據，模擬各類場景。

安裝

# 推薦經過npm安裝
npm install mockjs複製代碼

使用示例

// 首先在js文件中引進
var Mock = require('mockjs')
var data = Mock.mock({
    // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
    'list|1-10': [{
        // 屬性 id 是一個自增數，起始值爲 1，每次增 1
        'id|+1': 1
    }]
})複製代碼

語法

主要能夠分紅如下兩個方面：

• 數據模板定義規範
• 據佔位符定義規範

數據模板中的每一個屬性由 3 部分構成：屬性名、生成規則、屬性值：'name|rule': value

• 'name|min-max': string=>經過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max)
• 'name|count': string=>經過重複 string 生成一個字符串，重複次數等於 count
• 'name|+1': number=>屬性值自動加 1，初始值爲 number
• 'name|min-max': number=>生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來肯定類型
• 'name|count': object=>定對象中隨機選擇兩條數據，

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})複製代碼

輸出爲：

{
  "object": {
    "320000": "江蘇省",
    "330000": "浙江省"
  }
}複製代碼

數據佔位符定義規範 DPD
佔位符 只是在屬性值字符串中佔個位置，並不出如今最終的屬性值中。

• 來標識其後的字符串是 佔位符。
• 符 引用的是 Mock.Random 中的方法。
• Mock.Random.extend() 來擴展自定義佔位符。
• 符 也能夠引用 數據模板 中的屬性。
• 符 會優先引用 數據模板 中的屬性。
• 符 支持 相對路徑 和 絕對路徑。

能夠經過Mock.setup( settings )，配置攔截 Ajax 請求時的行爲。支持的配置項有：timeout
指定被攔截的 Ajax 請求的響應時間，單位是毫秒。值能夠是正整數，例如 400，表示 400 毫秒 後纔會返回響應內容；也能夠是橫槓 '-' 風格的字符串，例如 '200-600'，表示響應時間介於 200 和 600 毫秒之間。默認值是'10-100'。

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})複製代碼

掃碼關注公衆號，有更多精彩文章等你哦