mockjs

小鱼儿 2022-12-04 12:58 238阅读 0赞

## mockjs ##

1.  前后端分离（让前端攻城师独立于后端进行开发） 
2.  增加单元测试的真实性（通过随机数据，模拟各种场景） 
3.  开发无侵入（不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据） 
4.  用法简单（符合直觉的接口） 
5.  数据类型丰富（支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等） 
6.  方便扩展（支持支持扩展更多数据类型，支持自定义函数和正则）

`安装`

> npm install mockjs

`使用 Mock`

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

**Bower**

`安装`

> npm install -g bower  
> bower install --save mockjs
> 
> < script type=“text/javascript” src="./bower\_components/mockjs/dist/mock.js">< /script>

**RequireJS (AMD)**

`配置 Mock 路径`

require.config({
        paths: {
            mock: 'http://mockjs.com/dist/mock'
        }
    })
    // 加载 Mock
    require(['mock'], function(Mock){
        // 使用 Mock
        var data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        })
        // 输出结果
        document.body.innerHTML +=
            '<pre>' +
            JSON.stringify(data, null, 4) +
            '</pre>'
    })
    // ==>
    {
        "list": [
            {
                "id": 1
            },
            {
                "id": 2
            },
            {
                "id": 3
            }
        ]
    }

**Sea.js (CMD)**

因为 Sea.js 社区尚未提供 webpack 插件，所以 Mock.js 暂不完整支持通过 Sea.js 加载。

一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。

`配置 Mock 路径`

seajs.config({
        alias: {
            mock: 'http://mockjs.com/dist/mock.js'
        }
    })
    
    // 加载 Mock
    seajs.use('mock', function(__PLACEHOLDER) {
        // 使用 Mock（全局变量）
        var data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        });
        document.body.innerHTML +=
            '<pre>' +
            JSON.stringify(data, null, 4) +
            '</pre>'
    })

**Random CLI**

`全局安装`  
$ npm install mockjs -g

`执行`  
$ random url  
=> http://rmcpx.org/funzwc

`帮助`  
random -h

> Mock.js 最初的灵感来自 Elijah Manor 的博文 ocking Introduction，  
> 语法参考了 mennovanslooten/mockJSON，  
> 随机数据参考了 victorquinn/chancejs。