| 1 | # Mock - 模拟请求 & 模拟数据
|
| 2 |
|
| 3 | ## 模拟请求
|
| 4 | 通过添加前置过滤器、重写 XHR 对象，根据 URL 返回匹配的模拟数据。
|
| 5 |
|
| 6 | ## 模拟数据
|
| 7 | 基于一套数据模板语法，简化模拟数据的构造过程。
|
| 8 |
|
| 9 | ## DEMO & Test Case
|
| 10 | * DEMO:
|
| 11 | * [demo/mock.html](demo/mock.html)
|
| 12 | * [demo/mock4tpl.html](demo/mock4tpl.html)
|
| 13 | * [demo/mock4xtpl.html](demo/mock4xtpl.html)
|
| 14 | * NodeUnit:
|
| 15 | * [test/nodeuinit/mock-node.js](test/nodeuinit/mock-node.js)
|
| 16 | * [test/nodeuinit/mock4tpl-node.js](test/nodeuinit/mock4tpl-node.js)
|
| 17 | * [test/nodeuinit/mock4xtpl-node.js](test/nodeuinit/mock4xtpl-node.js)
|
| 18 | * QUnit:
|
| 19 | * [test/mock.html](test/mock.html)
|
| 20 | * [test/mock.js](test/mock.js)
|
| 21 |
|
| 22 | ## 依赖 & 支持
|
| 23 | * 无依赖
|
| 24 | * 支持的模块加载器：CommonJS、AMD、KISSY
|
| 25 | * 可以直接在浏览器中引入
|
| 26 |
|
| 27 |
|
| 28 | ## API
|
| 29 | * `Mock.mock(rurl, template)` 记录数据模板，当拦截到 Ajax 请求时生成模拟数据并返回。
|
| 30 | * `Mock.mock(template)` 根据数据模板生成模拟数据。
|
| 31 | * `Mock.Random` 生成随机元数据，参见“支持的占位符”。
|
| 32 | * `Mock4Tpl.mock(input, options, helpers, partials)` 基于客户端模板生成模拟数据。
|
| 33 |
|
| 34 |
|
| 35 | ## 语法
|
| 36 |
|
| 37 | #### 1. 每个属性包含 3 部分：
|
| 38 |
|
| 39 | 以 `'data|1-10':[{}]` 为例：
|
| 40 | * 属性名 - 例如 `data`。
|
| 41 | * 参数 - 指示生成数据的规则，例如 `|1-10`。
|
| 42 | * 属性值 - 表示初始值、占位符、类型，例如 `[{}]`。
|
| 43 |
|
| 44 | #### 2. 支持的语法：
|
| 45 | * `'data|1-10':[{}]` 构造一个数组，含有 1-10 个元素
|
| 46 | * `'data|1':[item, item, item]` 从数组中随机挑选一个元素做为属性值
|
| 47 | * `'id|+1': 1` 属性 id 值自动加一，初始值为 1
|
| 48 | * `'grade|1-100': 1` 生成一个 1-100 之间的整数
|
| 49 | * `'float|1-10.1-10': 1` 生成一个浮点数，整数部分的范围是 1-10，保留小数点后 1-10 位小数
|
| 50 | * `'star|1-10': '★'` 重复 1-10 次
|
| 51 | * `'repeat|10': 'A'` 重复 10 次
|
| 52 | * `'published|0-1': false` 随机生成一个布尔值
|
| 53 | * `'email': '@EMAIL'` 随即生成一个 Email
|
| 54 | * `'date': '@DATE'` 随即生成一段日期字符串，默认格式为 yyyy-MM-dd
|
| 55 | * `'time': '@TIME'` 随机生成一段时间字符串，默认格式为 HH:mm:ss
|
| 56 | * `'datetime': '@DATETIME'` 随机生成一段时间字符串，默认格式为 yyyy-MM-dd HH:mm:ss
|
| 57 |
|
| 58 | #### 3. 支持的占位符
|
| 59 | * @BOOL, @NATURAL, @INTEGER, @CHARACTER, @STRING
|
| 60 | * @DATE, @TIME, @DATETIME
|
| 61 | * @AD_SIZE, @SCREEN_SIZE, @VIDEO_SIZE, @IMG
|
| 62 | * @COLOR
|
| 63 | * @PARAGRAPH, @SENTENCE, @WORD
|
| 64 | * @FIRST, @LAST, @NAME
|
| 65 | * @DOMAIN, @EMAIL, @IP, @TLD
|
| 66 | * @GUID, @ID
|
| 67 |
|
| 68 | TODO: @ADDRESS, @CITY, @PHONE, @AREACODE, @STREET, @STREET_SUFFIXES, @STREET_SUFFIX, @STATES, @STATE, @ZIP
|
| 69 |
|
| 70 |
|
| 71 | ## 参考资料
|
| 72 | * <http://www.elijahmanor.com/2013/04/angry-birds-of-javascript-green-bird.html>
|
| 73 | * <http://nuysoft.com/2013/04/15/angry-birds-of-javascript-green-bird-mocking/>
|
| 74 | * <https://github.com/mennovanslooten/mockJSON>
|
| 75 | * <https://github.com/appendto/jquery-mockjax>
|
| 76 | * <http://chancejs.com/>
|
| 77 |
|
| 78 |
|
| 79 | ## 2014.5.9
|
| 80 | **数据模板中的每个属性由 3 部分构成**，以 `'data|1-10':[{}]` 为例：
|
| 81 |
|
| 82 | * 属性名：例如 `data`。
|
| 83 | * 参数：指示生成数据的规则。例如 `|1-10`，指示生成的数组中含有 1 至 10 个元素。
|
| 84 | * 属性值：表示初始值、占位符、类型。例如 `[{}]`，表示属性值一个数组，数组中的元素是 `{}`。属性值中含有占位符时，将被替换为对应的随机数据，例如 `'email': '@EMAIL'`，`'@EMAIL'`将被替换为随机生成的邮件地址。
|
| 85 |
|
| 86 | **参数和属性值部分的语法规范和示例**如下所示：
|
| 87 |
|
| 88 | * `'data|1-10':[{}]` 构造一个数组，含有 1-10 个元素
|
| 89 | * `'data|1':[item, item, item]` 从数组中随机挑选一个元素做为属性值
|
| 90 | * `'id|+1': 1` 属性 id 值自动加一，初始值为 1
|
| 91 | * `'grade|1-100': 1` 生成一个 1-100 之间的整数
|
| 92 | * `'float|1-10.1-10': 1` 生成一个浮点数，整数部分的范围是 1-10，保留小数点后 1-10 位小数
|
| 93 | * `'star|1-10': '★'` 生成一个字符串，重复 1-10 次 `'★'`
|
| 94 | * `'repeat|10': 'A'` 生成一个字符串，重复 10 次 `'A'`
|
| 95 | * `'published|1-2': false` 随机生成一个布尔值，值为 false 的概率是 1/3，值为 true 的概率是 2/3
|
| 96 | * `'email': '@EMAIL'` 随即生成一个 Email
|
| 97 | * `'date': '@DATE'` 随即生成一段日期字符串，默认格式为 `yyyy-MM-dd`
|
| 98 | * `'time': '@TIME'` 随机生成一段时间字符串，默认格式为 `HH:mm:ss`
|
| 99 | * `'datetime': '@DATETIME'` 随机生成一段时间字符串，默认格式为 `yyyy-MM-dd HH:mm:ss`
|
| 100 |
|
| 101 | Mock.js 的 [在线编辑器](./demo/mock.html) 演示了完整的语法规范和占位符。
|