• 【工具类】Mock.js的应用（一）

    Mock.js

    一、什么是Mock.js

    Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试，模拟数据请求。

    二、有什么用

    • 根据数据模板生成模拟数据
    • 模拟 Ajax 请求，生成并返回模拟数据
    • 基于 HTML 模板生成模拟数据

    三、核心点

    Mock.js 的语法规范包括两部分：

    1. 数据模板定义（Data Temaplte Definition，DTD）
    2. 数据占位符定义（Data Placeholder Definition，DPD）

    数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

    // 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
    • 属性名 和 生成规则 之间用 | 分隔。
    • 生成规则 是可选的。
    • 生成规则 有 7 种格式：
      • 'name|min-max': value
      • 'name|count': value
      • 'name|min-max.dmin-dmax': value
      • 'name|min-max.dcount': value
      • 'name|count.dmin-dmax': value
      • 'name|count.dcount': value
      • 'name|+step': value
    • 生成规则 的 含义 需要依赖 属性值 才能确定。
    • 属性值 中可以含有 @占位符。
    • 属性值 还指定了最终值的初始值和类型。
    生成规则和示例：

    • 属性值是字符串String

      • 'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 `max``

      • 'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count

    • 属性值是数字 Number

      • 'name|+1': 100 属性值自动加 1，初始值为 100

      • 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。

      • 'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。

         {
     'number1|1-100.1-10': 1,
     'number2|123.1-10': 1,
     'number3|123.3': 1,
     'number4|123.10': 1.123
 }
 // =>
 {
     "number1": 12.92,
     "number2": 123.51,
     "number3": 123.777,
     "number4": 123.1231091814
 }

    • 属性值是布尔型Boolean

      • 'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
      • 'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

    • 属性值是对象Object

      • 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
      • 'name|count': {} 从属性值 {} 中随机选取 count 个属性。

    • 属性值是数组Array

      • 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
      • 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
      • 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。

    • 属性值是数组 Function

      'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。

    四、Coding

    1）基础模板的应用

    随机生成字符串

    Mock.mock({
  "string1|1-10": "abc",
  "string2|3": "abc"
})
//输出
{
    string1: "abcabcabcabcabc",
    string2: "abcabcabc"
}

    随机生成数字

    Mock.mock({
    "number1|1-100":1, //1-100随机数
    "number2|1-100.1-10": 1,//1-100随机数，1-10位随机小数位
    "number3|123.3": 1//123.xxx 随机3为小数
})
//输出
{
    number1:55,
    number2:42.123152345,
    number3:123.632
}

    随机布尔值

    Mock.mock({
    "boolean1|1":true,//随机true/false 
    "boolean2|1-2": true// 1/3几率 true  2/3几率 false
})
//输出
{
    boolean1: true,
    boolean2: false
}

    随机对象属性

    Mock.mock({
    "object1|2":{
        "310000": "上海市",
        "320000": "江苏省",
        "330000": "浙江省",
        "340000": "安徽省"
    },
    "object2|2-4": {
        "110000": "北京市",
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
	}
})
//输出
{
    object1:{
        "330000": "浙江省",
        "340000": "安徽省"
    },
    object2:{
        "110000": "北京市",
        "140000": "山西省",
        "130000": "河北省"
    }
}

    随机一个数组

    Mock.mock({
	"array1|1": [ //随机一个
        "AMD",
        "CMD",
        "UMD"
    ],
	"array2|1-5": [
      {"name|1": [
        "Hello",
        "Mock.js",
      ]}
    ]
})
//输出
{
    "array1": "AMD",
    "array2": [
        {
          "name": "Hello"
        },
        {
          "name": "Mock.js"
        },
        {
          "name": "Hello"
        }
	]
}

    函数应用

    Mock.mock({
  'name': 'AlengHan',
  'sayName': function() {
    return "我的名字是："+this.name
  }
})
//输出
{
	'name': 'AlengHan',
    'sayName': "我的名字是：AlengHan"
}

    2）占位符

    1.随机的布尔值。

    Random.boolean( min?, max?, current? ) === @boolean(min, max, current)

    Random.boolean()
Mock.mock('@boolean')
Mock.mock('@boolean()')

Random.boolean(1, 9, true)
Mock.mock('@boolean(1, 9, true)')

    2.随机的自然数（大于等于 0 的整数）。

    Random.natural( min?, max? ) === @natural(min?, max? )

    Random.natural()//4667925258767094
Mock.mock('@natural')//4667925258767094
Mock.mock('@natural()')//4667925258767094

Random.natural(60, 100)
Mock.mock('@natural(60, 100)')

    3.随机的整数。

    Random.integer( min?, max? )

    Random.integer()//2135015435898868
Mock.mock('@integer')//-7047792899679432
Mock.mock('@integer()')//-1964858354379868

Random.integer(60, 100)
Mock.mock('@integer(60, 100)')

    4.随机的浮点数。

    Random.float( min?, max?, dmin?, dmax? )

    • 参数 min：可选。整数部分的最小值。默认值为 -9007199254740992。
    • 参数 max：可选。整数部分的最大值。默认值为 9007199254740992。
    • 参数 dmin：可选。小数部分位数的最小值。默认值为 0。
    • 参数 dmin：可选。小数部分位数的最大值。默认值为 17。
    Random.float()//2050529809881216.5
Mock.mock('@float')//-2195083631689596.8
Mock.mock('@float()')//686071118661252.4

Random.float(60, 100, 3, 5)
Mock.mock('@float(60, 100, 3, 5)')//91.513

    5.随机字符。

    Random.character( pool? )

    参数 pool：可选。字符串。表示字符池，将从中选择一个字符返回。

    • 如果传入 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池从选取：

        {
      lower: "abcdefghijklmnopqrstuvwxyz",
      upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      number: "0123456789",
      symbol: "!@#$%^&*()[]"
  }

    • 如果未传入该参数，则从 'lower' + 'upper' + 'number' + 'symbol' 中随机选取一个字符返回。

    Random.character()
Mock.mock('@character')
Mock.mock('@character()')

Random.character('lower')
Random.character('upper')
Random.character('number')
Random.character('symbol')

Mock.mock('@character("lower")')
Mock.mock('@character("upper")')
Mock.mock('@character("number")')
Mock.mock('@character("symbol")')

Random.character('abcdefg')
Mock.mock('@character("abcdefg")')

    6.随机字符串。

    Random.string( pool?, min?, max? )

    • 参数 pool：可选。字符串。表示字符池，将从中选择一个字符返回。

      • 如果传入 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池从选取：

          {
      lower: "abcdefghijklmnopqrstuvwxyz",
      upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      number: "0123456789",
      symbol: "!@#$%^&*()[]"
  }

      • 如果未传入该参数，则从 'lower' + 'upper' + 'number' + 'symbol' 中随机选取一个字符返回。

    • 参数 min：可选。随机字符串的最小长度。默认值为 3。

    • 参数 max：可选。随机字符串的最大长度。默认值为 7。

    Random.string()
Mock.mock('@string')
Mock.mock('@string()')

Mock.mock('@string("lower", 1, 3)')
Mock.mock('@string("upper", 1, 3)')
Mock.mock('@string("number", 1, 3)')
Mock.mock('@string("symbol", 1, 3)')
Mock.mock('@string("aeiou", 1, 3)')

    7.整型数组。

    Random.range(start?, stop, step?)

    • 参数 start：必选。数组中整数的起始值。
    • 参数 stop：可选。数组中整数的结束值（不包含在返回值中）。
    • 参数 step：可选。数组中整数之间的步长。默认值为 1。
    Random.range(10)
Mock.mock('@range(10)')

Mock.mock('@range(1, 10, 2)')//[1,3,5,7,9]
Mock.mock('@range(1, 10, 3)')//[1,4,7]

    8.随机的日期字符串。

    Random.date( format? )

    参数的含义和默认值如下所示：

    • 参数 format：可选。指示生成的日期字符串的格式。默认值为 yyyy-MM-dd。可选的占位符参考自 Ext.Date，如下所示：

    时间日期占位符参考表[^1]

    Format Description Example
    yyyy A full numeric representation of a year, 4 digits 1999 or 2003
    yy A two digit representation of a year 99 or 03
    y A two digit representation of a year 99 or 03
    MM Numeric representation of a month, with leading zeros 01 to 12
    M Numeric representation of a month, without leading zeros 1 to 12
    dd Day of the month, 2 digits with leading zeros 01 to 31
    d Day of the month without leading zeros 1 to 31
    HH 24-hour format of an hour with leading zeros 00 to 23
    H 24-hour format of an hour without leading zeros 0 to 23
    hh 12-hour format of an hour without leading zeros 1 to 12
    h 12-hour format of an hour with leading zeros 01 to 12
    mm Minutes, with leading zeros 00 to 59
    m Minutes, without leading zeros 0 to 59
    ss Seconds, with leading zeros 00 to 59
    s Seconds, without leading zeros 0 to 59
    SS Milliseconds, with leading zeros 000 to 999
    S Milliseconds, without leading zeros 0 to 999
    A Uppercase Ante meridiem and Post meridiem AM or PM
    a Lowercase Ante meridiem and Post meridiem am or pm
    T Milliseconds, since 1970-1-1 00:00:00 UTC 759883437303 
    Random.date()
Mock.mock('@date')
Mock.mock('@date()')

Mock.mock('@date("yyyy-MM-dd")')//"2020-06-28"

    9.随机的时间字符串。

    Random.time( format? )

    参数的含义和默认值如下所示：

    • 参数 format：可选。指示生成的时间字符串的格式。默认值为 HH:mm:ss。参考上表。
    Random.time()
Mock.mock('@time')
Mock.mock('@time()')

Mock.mock('@datetime("HH H hh h mm m ss s SS S A a T")')

    10.随机的日期和时间字符串。

    Random.datetime( format? )

    参数的含义和默认值如下所示：

    • 参数 format：可选。指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss。
    Random.datetime()
Mock.mock('@datetime')
Mock.mock('@datetime()')

Mock.mock('@datetime("yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T")')

    11.当前的日期和时间字符串。

    Random.now( unit?, format? )

    • 参数 unit：可选。表示时间单元，用于对当前日期和时间进行格式化。可选值有：year、month、week、day、hour、minute、second、week，默认不会格式化。
    • 参数 format：可选。指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss。时间日期占位符参考表
    Random.now()
Mock.mock('@now')
Mock.mock('@now()')

Random.now('yyyy-MM-dd HH:mm:ss SS')//"2020-06-29 19:15:33 433"
Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')//"2020-06-29 00:00:00 000"
  • 相关阅读:
    总结：关于作用域的经典面试题
    解决JS拖拽出现的问题
    JS正则（3）总结
    JS正则（2）对正则的理解
    JS 闭包 正则(1)
    JS Date对象
    笔记
    9.13笔记
    9.12学习笔记
    9.11学习笔记
  • 原文地址：https://www.cnblogs.com/alenghan/p/13210918.html
Copyright © 2020-2023  润新知