Mockjs Lite 仿真数据生成器

MIT
JavaScript 查看源码»
跨平台
2017-09-07
楼教主

Mockjs Lite,一个极简的仿真数据生成器

特别说明

这个项目参(抄)考(袭)自 Mock.js,但为什么要重复造轮子呢?

  1. 因为部分功能不好用,比如没有随机手机号,没有时间区间,占位图不能自己切源,等等。

  2. 不够自由,不方便插件化自定义功能,不方便局部定义项目友好的数据。

  3. 因为太大了,一个mock而已,为什么要这么大。

  4. 因为看了源代码,就想重写了。

好吧,就当是练手了。

PS: 采用 ES6 重写,大部分功能代码抄袭 Mock.js,好用的留着,不好用的,自己改了。

Mockjs-Lite 与 Mockjs 差异说明

  1. 移除了 ajax 部分,因为 xhr 劫持方式,确实不是很友好。(最好针对 jquery, axios 等插件化劫持)

  2. 移除了 Path, RegExp 功能,感觉不是特别实用。

  3. 移除 Random.natural 方法,其实就是单词太难写,完全可以 Random.integer Random.int 代替。

  4. 移除 Random.dataImage 方法,很鸡肋,非常的鸡肋。

  5. 精简了地址库,由原先的 113k 精简到了 15k,只保留了北上广之类的一线二线城市。

  6. Function 功能优化,可以用 this 当前兄弟节点以及 root 全部对象。

  7. Random.datetime 功能优化,增加时间区间,以及时间戳,10位时间戳的支持。

  8. Image 部分优化,支持切换占位图源,默认七牛占位图。

为什么要用 Mockjs-Lite?

  • 轻量和敏捷

  • 简单的语法

  • 直观的结果

  • 方便自定义

  • 编不下去了

用法

在项目中添加 Mockjs-Lite

$ yarn add mockjs-lite # 推荐
# 或者
$ npm i -S mockjs-lite

使用 Mockjs-Lite

// 使用 Mock
const { Mock } = require('mockjs-lite');
const data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id|+1': 1
  }]
});
// 输出结果
console.log(JSON.stringify(data, null, 2));

或者 es6

import { Mock, Random } from 'mockjs-lite';

const data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id|+1': 1
  }]
});

console.log(JSON.stringify(data, null, 2));
console.log(Random.now());

PS: 别吐槽,例子抄 Mock.js 的 wiki 文档。。

相关

  • Mock.js - 对,就是抄的他。。

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

vue使用mockjs

在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其...

06/22 11:11
196
0
Mockjs + Vue 拦截 AJAX,模拟请求数据

日常工作中,前端通过ajax调用后端的接口是非常常见的事情。然而很多情况下,调用接口也会出现很多不方便或者麻烦的情况。 例如:现在有一个抽奖的项目,分为1,2,3等。后台同事写好接口之后...

09/24 22:33
1
0
eoLinker-AMS接口管理系统 Mock API教程

此前我也陆陆续续的写过一点关于Mock API的使用方式,今天就将把eoLinker-AMS的Mock API教程正式放上来,大家有什么疑问或者建议欢迎随时私聊我哈。

01/24 14:56
31
0
关于使用express进行mock数据

https://blog.csdn.net/qq_33276399/article/details/78838119 但是这个并不够,最好再加上mockjs生成模拟数据。测试后再发 http://javascript.ruanyifeng.com/nodejs/express.html http://...

04/06 16:53
29
0
1.es6即ECMAScript简介

1.简介 2.默认参数 3.字符串模板 4.解构赋值,箭头函数 5.es6前端的基本技能 前端技术的提升,学习es6的源码 vue既是es6源码开发的 6.构建工具 es6的编译,监听,打包,上线流程 后端服务框架...

09/05 08:51
2
0
谁说前端非得等后端写完api才能开发

下载相关工具:ajax请求使用jQuery,mock包(https://github.com/nuysoft/Mock/tree/refactoring) 相关代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></titl...

2016/11/10 10:59
17
0
再一次掉进react native的坑了。ReferenceError can't find variable:location

以前用react native写过半个app,后来总总原因,没有上线了,不过公司最近又有这方面的需求,于是再次拾起RN,发现两个月没见,RN已经升级到0.38了。 但是,在项目中发现了一个很奇怪的问题,...

2016/12/02 15:29
108
0
Mock.js的使用

前端可以先于后端写页面,不用等待接口。

2016/05/26 16:36
184
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部