Mock.js 语法规范全解读

前端开发的世界里，没有什么比等待后端接口更令人焦虑的了。而Mock.js恰如一位魔法师，让我们能够自由创造各种随机数据，拦截Ajax请求，让开发不再受制于后端进度。今天，就让我们一起深入了解这位"魔法师"的咒语——Mock.js语法规范。

Mock.js的语法体系优雅而强大，主要由两大部分构成：

数据模板定义规范（Data Template Definition，DTD）—— 决定数据的结构和生成规则
数据占位符定义规范（Data Placeholder Definition，DPD）—— 为数据注入灵活多变的内容

数据模板定义规范：构建你的数据世界

在Mock.js的世界里，每个数据属性都由三部分精妙组合而成：属性名、生成规则和属性值，形如：

'name|rule': value

这看似简单的结构，却能变幻出无穷的可能性。值得注意的是，同一条生成规则在不同属性值类型下，会呈现完全不同的魔法效果。让我们一起探索这些奇妙变化！

字符串的魔法变化

想要让一个字符串重复出现？Mock.js提供了两种优雅的方式：

// 让'star'重复2~5次
Mock.mock({
  'content|2-5': 'star'
})
// 可能得到：{content: 'starstarstar'}

// 精确控制重复5次
Mock.mock({
  'content|5': 'star'
})
// 一定得到：{content: 'starstarstarstarstar'}

数字的智能生成

在处理数字时，Mock.js展现出惊人的灵活性：

// 生成自增ID，完美应对列表数据
Mock.mock({
    'list|1-10': [{
        'id|+1': 1, // 从1开始，每次加1
    }]
})
// 可能得到：[{id: 1}, {id: 2}, {id: 3}]

// 生成指定范围的随机整数
Mock.mock({
  'count|10-100': 1 
})
// 可能得到：{count: 72}

// 生成精确控制小数位的浮点数
Mock.mock({
  'price|10-100.1-2': 1.1
})
// 可能得到：{price: 13.18}

布尔值的概率控制

Mock.js甚至能让你精确控制布尔值出现的概率：

// 50%的概率得到true
Mock.mock({
  'isActive|1': true
})

// 20%的概率得到true
Mock.mock({
  'isVIP|1-4': true
})

对象的随机选择

对于复杂对象，你可以随机选取部分属性：

// 随机选取1个属性
Mock.mock({
  'userInfo|1': {id: 1, name: 'Joel', phone: '138xxxx', email: 'joel@xx.com'}
})
// 可能得到：{userInfo: {phone: '138xxxx'}}

// 随机选取1-3个属性
Mock.mock({
  'userInfo|1-3': {id: 1, name: 'Joel', phone: '138xxxx', email: 'joel@xx.com'}
})
// 可能得到：{userInfo: {phone: '138xxxx', name: 'Joel'}}

数组的多样变化

数组处理是Mock.js的强项之一：

// 随机选取一个元素
Mock.mock({
  'randomItem|1': [1, 2, 3, 4, 5]
})
// 可能得到：{randomItem: 2}

// 顺序选取元素
const options = [1, 2, 3, 4, 5]
Mock.mock({
    'selections|1-3': [{
        'value|+1': options,
    }]
})
// 可能得到：{selections: [{value: 1}, {value: 2}]}

// 重复数组内容
Mock.mock({
    'repeatedList|2': [1, 2, 3]
})
// 得到：{repeatedList: [1, 2, 3, 1, 2, 3]}

函数与正则的创意应用

Mock.js还支持函数计算和正则表达式反向生成：

// 函数计算属性值
Mock.mock({
    'username': () => '用户' + Math.floor(Math.random() * 1000)
})
// 可能得到：{username: '用户521'}

// 根据正则生成匹配的字符串
Mock.mock({
    'verifyCode': /[0-9A-Z]{6}/
})
// 可能得到：{verifyCode: 'X2P5F7'}

数据占位符：注入生动的细节

占位符是Mock.js的另一种魔法，它能让数据更加真实自然。占位符的格式为：

@占位符
@占位符(参数 [, 参数])

这些占位符会引用Mock.Random中的方法或数据模板中的属性：

Mock.mock({
    name: {
        first: '@FIRST',
        last: '@LAST',
        full: '@first @last'
    }
})
// 可能得到：{name: {first: 'Cynthia', last: 'Williams', full: 'Cynthia Williams'}}

Apifox：让Mock更简单，开发更高效

了解了Mock.js的语法规范，你已经掌握了数据模拟的基础能力。但如果想要更轻松地应用这些技能，Apifox将是你的得力助手。

Apifox不仅完全兼容Mock.js语法，还扩展了许多实用功能，如国内手机号@phone等本地化占位符。它的界面直观友好，让你能够轻松定义字段名和类型，系统会自动生成符合结构的JSON数据。

Apifox智能Mock界面

当你需要模拟大量列表数据时，Apifox的优势更加明显。无需手动编写成百上千条记录，只需简单的for循环即可完成：

Apifox列表数据模拟

对于分页数据，Apifox提供了专业的模拟方案，让你可以自定义总记录数和每页容量，实现真实的分页效果：

Apifox分页数据模拟

除此之外，Apifox还支持模拟网络延迟、加载状态和错误状态，真正做到了全方位的接口模拟。它不仅是一个Mock工具，更是集API设计、调试、测试于一体的全能平台。

写在最后

数据模拟是前端开发中不可或缺的环节，掌握Mock.js的语法规范，再结合Apifox这样的专业工具，你将能够构建更加高效的开发工作流，不再被后端进度所束缚。

你是否已经在项目中使用过Mock.js或Apifox？有什么心得体会想要分享？欢迎在评论区留言交流，也别忘了把这篇文章分享给可能需要的同事和朋友！

立即体验Apifox，让你的开发之旅更加顺畅！