如何使用MockJS自定义扩展方法

在使用mockjs.js之前请确保已通过npm install mockjs进行了安装。

讲解说明

其实定义扩展方式很容易，确切的来说主要是通过mockjs.js中的Random.extend方法进行自定义扩展方法。可以先看一下以下与Random.extend相关的类型定义声明，有助于我们对扩展方法的构造和使用的理解：

declare namespace mockjs {
    
    interface Mockjs {
        Random: MockjsRandom;
    }

    interface MockjsRandomExtendOption {
        [randomType: string]: (...args: any[]) => any;
    }

    // Mockjs.Random
    // see https://github.com/nuysoft/Mock/wiki/Mock.Random
    interface MockjsRandom
        // Random.extend
        extend(extendOption: MockjsRandomExtendOption): MockjsRandom;
}

以上就是Random.extend方法的相关类型定义声明，由此可以得出Mockjs只是通过Random.extend方法将我们自定义的扩展（其实占位符和数据模板也如此）合并到Random对象当中。

具体的扩展定义我们需要看MockjsRandomExtendOption，然而通过上面的类型定义声明发现MockjsRandomExtendOption只是一个key-value对象，key就是我们要定义的扩展方法的名称，value就是名称所对应的要执行的函数。

代码案例

接下来我们举一个生成随机数量指定内容的列表的扩展方法的例子（也可以看官方案例），代码如下：

import Mock from "mockjs"

/**
 * 生成随机数量指定内容的列表
 *
 * @param template 任意数据类型数据也可以是Mockjs数据模板
 * @param min {?number} 最小数量
 * @param max {?number} 最大数量
 * @return {array} 返回随机数量指定内容的列表
 */
function dataListCallback(template, min, max) {
    min = min === undefined ? 1 : min
    max = max === undefined ? min : max
    
    let len = Math.round(Math.random() * (max - min)) + min
    let dataList, idx = new Array(len), 0
    
    while (idx < len) {
        dataList[idx++] = temmplate;
    }
    
    return dataList
}

// 扩展方法名称：`dataList` 通过Random.extend将扩展方法合并到Random中，方便我们可以直接通过Random使用扩展方法
Mock.Random.extend({
    dataList: dataListCallback
})

使用方式如下代码：

import Mock from "mockjs"

// 生成固定数量元素的数组
Mock.Random.dataList("a", 1)  // output: ["a"]
Mock.Random.dataList("a", 3)  // output: ["a", "a", "a"]

// 生成最小值为 1 最大值为 3 的随机数的数量元素的数组
Mock.Random.dataList("a", 1, 3)  // output: ["a"]
Mock.Random.dataList("a", 1, 3)  // output: ["a", "a", "a"]

// 列表嵌套
Mock.Random.dataList(Mock.Random.dataList("a", 1), 2)  // output: [["a"], ["a"]]

// 元素为字典
Mock.Random.dataList({1: 2}, 2)  // output: [{1: 2}, {1: 2}]

// 使用Mockjs数据模板
Mock.Random.dataList({'number1|1-100.1-10': 1}, 2)  // output: [{"number1": 12.92}, {"number1": 50}]

结语：

本人接触JavaScript不是太多，只是想记录一下知识点并分享给有同样问题的同学。如果有不正确的地方请在评论区指出:)。

参考文档：

Home · nuysoft/Mock Wiki · GitHub