Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程,
使用npm安装: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;
‘name|rule‘: value
属性名|生成规则: 属性值
发起get请求:
$.ajax({
url: ‘http://test.com‘,
type: ‘get‘,
dataType: ‘json‘
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js响应:
var obj = {‘aa‘:‘11‘, ‘bb‘:‘22‘, ‘cc‘:‘33‘, ‘dd‘:‘44‘};
// Mock响应模板
Mock.mock(‘http://test.com‘, {
"user|1-3": [{ // 随机生成1到3个数组元素
‘name‘: ‘@cname‘, // 中文名称
‘id|+1‘: 88, // 属性值自动加 1,初始值为88
‘age|18-28‘: 0, // 18至28以内随机整数, 0只是用来确定类型
‘birthday‘: ‘@date("yyyy-MM-dd")‘, // 日期
‘city‘: ‘@city(true)‘, // 中国城市
‘color‘: ‘@color‘, // 16进制颜色
‘isMale|1‘: true, // 布尔值
‘isFat|1-2‘: true, // true的概率是1/3
‘fromObj|2‘: obj, // 从obj对象中随机获取2个属性
‘fromObj2|1-3‘: obj, // 从obj对象中随机获取1至3个属性
‘brother|1‘: [‘jack‘, ‘jim‘], // 随机选取 1 个元素
‘sister|+1‘: [‘jack‘, ‘jim‘, ‘lily‘], // array中顺序选取元素作为结果
‘friends|2‘: [‘jack‘, ‘jim‘] // 重复2次属性值生成一个新数组
},{
‘gf‘: ‘@cname‘
}]
});
可以看到结果:
{
"user": [
{
"name": "董静",
"id": 88,
"age": 25,
"birthday": "2015-04-01",
"city": "湖南省 怀化市",
"color": "#c0f279",
"isMale": false,
"isFat": false,
"fromObj": {
"dd": "44",
"aa": "11"
},
"fromObj2": {
"bb": "22",
"cc": "33"
},
"brother": "jack",
"sister": "jack",
"friends": [
"jack",
"jim",
"jack",
"jim"
]
},
{
"gf": "田杰"
}
]
}
响应时也可以是使用function, 如:
Mock.mock(‘http://test.com‘, ‘get‘, function() {
return Mock.mock({
"user|1-3": [{
‘name‘: ‘@cname‘,
‘id‘: 88
}
]
});
});
结果:
{
"user": [
{
"name": "许超",
"id": 88
}
]
}
发起post请求:
$.ajax({
url: ‘http://test.com‘,
type: ‘post‘,
dataType: ‘json‘,
data: {
account: 888,
pwd: ‘abc123‘
}
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js响应:
Mock.mock(‘http://test.com‘, function(options) {
console.log(options);
return Mock.mock({
"user|1-3": [{
‘name‘: ‘@cname‘,
‘id|+1‘: 88
}
]
});
});
可以看到结果:
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
{
"user": [
{
"name": "曾明",
"id": 88
}
]
}
可以自定义设置响应时间, 可以是绝对值, 也可以是区间.
// 设置4秒后再响应
Mock.setup({ timeout: 4000 });
// 设置1秒至4秒间响应
Mock.setup({ timeout: ‘1000-4000‘ });
Mock.Random是一个工具类,用于生成各种格式随机数据. 有两种写法:
第一种:
// 生成一个email格式的字符串
console.log(Mock.mock(‘@email‘)); // 结果: s.uorjeqdou@crqfpdypt.gw
第二种:
var Random = Mock.Random;
console.log(Random.email()); // 结果: r.quyppn@yit.cv
提供的种类有:
Type | Method |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
如果上面没有你需要的种类, 还可以自定义扩展, 如下:
Random.extend({
weekday: function(date) {
var weekdays = [‘Sunday‘, ‘Monday‘, ‘Tuesday‘, ‘Wednesday‘, ‘Thursday‘, ‘Friday‘, ‘Saturday‘];
return this.pick(weekdays);
},
sex: function(date) {
var sexes = [‘男‘, ‘女‘, ‘中性‘, ‘未知‘];
return this.pick(sexes);
}
});
console.log(Random.weekday()); // 结果: Saturday
console.log(Mock.mock(‘@weekday‘)); // 结果: 112Tuesday
console.log(Random.sex()); // 结果: 男
console.log(Mock.mock(‘@sex‘)); // 结果: 未知
Mock.valid(template, data): 用来校验真实数据data是否与数据模板template匹配
var tempObj = { "user|1-3": [{ ‘name‘: ‘@cname‘, ‘id|18-28‘: 88 } ]};
var realData = { "user": [{ ‘name‘: ‘张三‘, ‘id‘: 90 } ]};
console.log(Mock.valid(tempObj, realData));
Mock.toJSONSchema(template): 用来把Mock.js风格的数据模板template转换成JSON Schema
var tempObj = { "user|1-3": [{ ‘name‘: ‘@cname‘, ‘id|18-28‘: 88 } ]};
console.log(Mock.toJSONSchema(tempObj));
在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。
双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe
js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。
由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol
在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象
js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。
奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1
质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。
JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。
XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!