首页 > 代码库 > 进行独立于后台后端的前端开发——学习Mockjs

进行独立于后台后端的前端开发——学习Mockjs

Mockjs实现的功能

1.让前端攻城师独立于后端进行开发。

2.通过随机数据,模拟各种场景。增加单元测试的真实性

3.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

4.用法简单

5.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

6.支持支持扩展更多数据类型,支持自定义函数和正则。

语法

数据模版中,每个属性由3个部分组成:属性名,生成规则,属性值:‘name’|‘rule’:‘value’

注意:

  1. 属性名与生成规则之间用 ‘|’
  2. 生成规则是可选的
  3. 生成规则有其中格式:
    1. ‘name|min-max‘: value
    2. ‘name|count‘: value
    3. ‘name|min-max.dmin-dmax‘: value
    4. ‘name|min-max.dcount‘: value
    5. ‘name|count.dmin-dmax‘: value
    6. ‘name|count.dcount‘: value
    7. ‘name|+step‘: value 
  4. 生成规则的含义需要以来属性值才能确定
  5. 属性值中可以含有占位符
  6. 属性值还指定了最终值的初始值和类型

生成规则示例说明

  1. ‘name|min-max‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数大于等于 min,小于等于 max。
  2. ‘name|count‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数等于 count。
  3. ‘name|+1‘: 100 属性值自动加 1,初始值为 100
  4. ‘name|1-100‘: 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
  5. ‘name|1-100.1-10‘: 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
  6. ‘name|1‘: value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
  7. ‘name|min-max‘: value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
  8. ‘name|min-max‘: {} 从属性值 {} 中随机选取 min 到 max 个属性。
  9. ‘name|count‘: {} 从属性值 {} 中随机选取 count 个属性。
  10. ‘name|1‘: [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
  11. ‘name|min-max‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
  12. ‘name|count‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
  13. ‘name‘: function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 ‘name‘ 所在的对象。

数据的占位符定义

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:@占位符(参数 [,参数])

注意:

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

示例

{
 name: {
 first: ‘@FIRST‘,
 middle: ‘@FIRST‘,
 last: ‘@LAST‘,
 full: ‘@first @middle @last‘
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

用法:

jquery:

<script src="http://mockjs.com/dist/mock.js"></script>
Mock.mock(‘http://g.cn‘, {
    ‘name‘     : ‘@name‘,
    ‘age|1-100‘: 100,
    ‘color‘    : ‘@color‘
});

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

nodejs:

// 安装
npm install mockjs

// 使用
var Mock = require(‘mockjs‘);
var data =http://www.mamicode.com/ Mock.mock({
    ‘list|1-10‘: [{
        ‘id|+1‘: 1
    }]
});

console.log(JSON.stringify(data, null, 4))

 

官方文档:http://mockjs.com

进行独立于后台后端的前端开发——学习Mockjs