MockMonkey v1.1.0 发布：自定义方法让动态 Mock 数据更简单

knightnight
4 阅读3分钟

MockMonkey 是一款浏览器端运行的 Tampermonkey 用户脚本，用于拦截和模拟 XHR/Fetch 请求。所有代码在浏览器沙箱中运行，无需后端服务。

🚀 v1.1.0 核心新功能：自定义方法（Alpha）

在 v1.1.0 版本中，MockMonkey 引入了自定义方法功能，允许开发者编写 JavaScript 函数来生成动态的 Mock 响应数据。

什么是自定义方法？

自定义方法就像是你自己的"数据工厂"——你可以定义 JavaScript 函数，然后在 Mock 规则中引用它们返回的数据。

核心价值：

  • 动态生成数据（如时间戳、随机 ID）
  • 根据请求上下文返回不同数据
  • 代码复用，避免重复编写相似的数据结构
  • 与 Mock.js 深度集成，轻松生成随机数据

基本用法

1. 添加方法

方式一：通过 UI 面板（推荐）

  1. 打开 MockMonkey 面板
  2. 切换到"方法"标签页
  3. 点击"添加方法"，填写表单：
    • 名称：getTimestamp
    • 代码：return Date.now();

方式二：通过控制台

// 添加简单方法
mockMonkey.methods.add('getTimestamp', 'return Date.now();');

// 添加返回对象的方法
mockMonkey.methods.add('getUser', `
  return {
    id: 1,
    name: 'Alice',
    email: 'alice@example.com'
  };
`);

2. 在响应中使用方法

添加方法后，可以在规则响应中使用 @方法名 引用：

// 通过控制台添加规则
mockMonkey.add('/api/time', { timestamp: '@getTimestamp' });

// 或者使用对象嵌入语法 @{...方法名}
mockMonkey.add('/api/user', { user: '@{...getUser}' });

高级用法

对象展开语法

使用 @{...functionName} 作为对象键时，会将返回的对象合并到当前对象中：

// 定义基础响应模板
mockMonkey.methods.add('getBaseResponse', `
  return {
    status: 'success',
    code: 0,
    message: 'OK'
  };
`);

// 使用展开语法组合响应
mockMonkey.add('/api/data', {
  '@{...getBaseResponse}': true,
  data: { items: [1, 2, 3] }
});

返回结果：

{
  "status": "success",
  "code": 0,
  "message": "OK",
  "data": { "items": [1, 2, 3] }
}

访问请求上下文

方法可以访问请求的完整上下文：

// 根据路径参数返回动态用户信息
mockMonkey.methods.add('userById', `
  const id = ctx.params.id;
  return {
    id: parseInt(id),
    name: 'User ' + id,
    email: 'user' + id + '@example.com'
  };
`);

// 匹配带参数的 URL
mockMonkey.add('/api/users/:id', {
  code: 200,
  data: '@{...userById}'
});

可用上下文变量：

  • ctx.url - 请求的完整 URL
  • ctx.method - 请求方法（GET、POST 等）
  • ctx.body - 请求体
  • ctx.params - 从 URL 中提取的路径参数
  • ctx.Mock - Mock.js 实例，用于生成随机数据

在方法内使用 Mock.js

mockMonkey.methods.add('getRandomUser', `
  return ctx.Mock.mock({
    id: '@natural(1, 1000)',
    name: '@name',
    email: '@email',
    address: {
      city: '@city',
      country: '@country'
    }
  });
`);

UI 管理

在"方法"标签页中，每个方法卡片提供以下操作：

操作说明
📋 详情展开/收起查看方法代码
✏️ 编辑修改方法名称、描述或代码
🟢/⚫切换方法的启用/禁用状态
🗑️ 删除删除方法（需确认）
⋮⋮拖拽手柄，可拖动调整方法顺序

其他 v1.1.0 新特性

路由参数匹配

支持 :paramName 语法自动提取 URL 参数：

// URL 匹配 /api/users/:userId/posts/:postId
// 响应中可使用 @ctx.params.userId 和 @ctx.params.postId

搜索功能

规则和网络请求面板新增搜索框，支持实时过滤。

规则重排序

支持拖拽或按钮调整规则优先级，规则匹配遵循"先匹配先得"原则。

最佳实践

  1. 在方法内部使用 Mock.js：方法返回值不会再次处理，需要动态数据时在方法内调用 ctx.Mock
  2. 避免循环引用：方法不能调用其他方法
  3. 使用描述字段：为方法添加描述，方便团队协作
  4. 注意 Alpha 状态：API 可能会变更，不建议在生产环境使用

安装与使用

  1. 安装 Tampermonkey 浏览器扩展
  2. 访问 Greasy Fork 或 GitHub Releases 安装脚本
  3. 访问任意网页，点击悬浮按钮打开管理面板

GitHub: github.com/ikaven1024/…

当前版本: v1.1.0

⚠️ 自定义方法功能处于 Alpha 阶段，API 可能会变更。欢迎反馈使用体验和建议！

avatar
文章
阅读
粉丝