Mock.js

发表于 | | 阅读次数
字数统计 1,375字 | 阅读时长 5分钟

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

语法规范

Mock.js 的语法规范包括两部分：

  • 数据模板定义规范（Data Template Definition，DTD）
  • 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

  • 属性名 和 生成规则 之间用竖线 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式：
    • ‘name|min-max’: value
    • ‘name|count’: value
    • ‘name|min-max.dmin-dmax’: value
    • ‘name|min-max.dcount’: value
    • ‘name|count.dmin-dmax’: value
    • ‘name|count.dcount’: value
    • ‘name|+step’: value
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。
    生成规则和示例：
    1. 属性值是字符串 String
  • ‘name|min-max’: string
    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
  • ‘name|count’: string
    通过重复 string 生成一个字符串，重复次数等于 count。
    2. 属性值是数字 Number

  • ‘name|+1’: number

    属性值自动加 1，初始值为 number。

  • ‘name|min-max’: number
    生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

  • ‘name|min-max.dmin-dmax’: number
    生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

3.属性值是布尔型 Boolean

4. 属性值是对象 Object

5. 属性值是数组 Array

6. 属性值是函数 Function

  • ‘name’: function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

7. 属性值是正则表达式 RegExp

  • ‘name’: regexp

根据正则表达式regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径。

Mock.mock

Mock.mock( rurl?, rtype?, template|function(options) )

根据数据模板生成模拟数据。

  • ock.mock( template )
    根据数据模板生成模拟数据。

  • Mock.mock( rurl, template )
    记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

  • Mock.mock( rurl, function(options) )
    记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

  • Mock.mock( rurl, rtype, template )
    记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

  • Mock.mock( rurl, rtype, function(options) )
    记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

参数的含义和默认值如下所示：

  • 参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、’/domian/list.json’。
  • 参数 rtype：可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  • 参数 template：可选。表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
  • 参数 function(options)：可选。表示用于生成响应数据的函数。
  • 参数 options：指向本次请求的 Ajax 选项集。

从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。

Mock.mockjax(library)

Mock.setup()

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

timeout
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 ‘-‘ 风格的字符串，例如 ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。默认值是’10-100’。

目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

本作品采用 知识共享署名 2.5 中国大陆许可协议 进行许可，欢迎转载，但转载请注明来自JayMo，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接：http://jaymo666.github.io/2017/09/21/Mock/