前端工程构建常见的 polyfill 与 Mock

[TOC]

## Polyfill（垫片 / 补丁）

|项|说明|
|--|--|
|**是什么？**|polyfill = 给旧浏览器补上新功能的代码补丁 很多新的 JS/API 语法（ES6+、fetch、Promise），老浏览器不支持，polyfill 就是手动实现这些新功能，让老浏览器也能正常跑。|
|**作用 & 解决的问题**|解决浏览器兼容性问题 让旧浏览器支持新语法、新 API 不用为了兼容放弃写现代代码|
|**使用方式**|直接引入 polyfill 库（如 core-js） 或手动实现缺失的方法 工程化项目用 babel 自动注入|

###  示例

**1️⃣手动 polyfill（最易懂）**给不支持 `Array.prototype.includes` 的旧浏览器补方法：

```js
// 检测浏览器是否自带 includes，没有就手动实现（polyfill）
if (!Array.prototype.includes) {
  // 手动实现 ES7 的 includes 方法
  Array.prototype.includes = function (searchElement, fromIndex) {
    // this 代表调用该方法的数组
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    const arr = Object(this);
    const len = arr.length >>> 0;
    if (len === 0) return false;

const start = fromIndex | 0;
    let k = Math.max(start >= 0 ? start : len + start, 0);

// 循环查找元素
 while (k < len) {
 if (arr[k] === searchElement) {
 return true;
 }
 k++;
 }
 return false;
 };
}

// 现在所有浏览器都能用 includes 了
const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出 true
```

**2️⃣工程化常用（core-js）**

```js
// 项目入口文件全局引入，自动补全缺失的 ES6+ 特性
import "core-js/stable";
import "regenerator-runtime/runtime";

// 老浏览器也能正常用 Promise、fetch、flat 等新特性
Promise.resolve(123).then(res => console.log(res));
```

## Mock（模拟数据 / 假接口）

|项|说明|
|--|--|
|**是什么？**|mock = 后端接口没做好时，前端自己造的假数据 / 假接口 开发时不用等后端写完接口，自己模拟请求和返回值，不影响开发进度。|
|**作用 & 解决的问题**|前后端并行开发（不等后端） 模拟各种接口场景：成功、失败、异常、分页 测试极端数据、边界情况 无网络也能开发|
|**使用方式**|本地造 JSON 假数据 使用 mock 库（如 mockjs） 搭建本地 mock 服务|

### 示例

**1️⃣最简单的本地 mock（纯 JS）**

```js
// 模拟一个获取用户列表的接口（假数据）
function mockGetUserList() {
  // 模拟网络请求延迟
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟后端返回的标准格式
      resolve({
        code: 200,
        message: "success",
        data: [
          { id: 1, name: "张三", age: 20 },
          { id: 2, name: "李四", age: 22 },
        ],
      });
    }, 500);
  });
}

// 使用 mock 数据进行页面渲染
async function useMockData() {
  const res = await mockGetUserList();
  if (res.code === 200) {
    console.log("用户列表：", res.data);
  }
}

useMockData();
```

**2️⃣常用库 Mock.js 生成随机数据**

```js
// 引入 mockjs（前端最流行 mock 库）
import Mock from 'mockjs';

// 拦截 /api/user 请求，返回随机模拟数据
Mock.mock('/api/user', {
  // 随机生成 id
  'id|+1': 1,
  // 随机中文名
  name: '@cname',
  // 随机年龄 18-30
  'age|18-30': 20,
  // 随机邮箱
  email: '@email'
});

// 发送请求，会自动拿到 mock 数据（无需后端）
fetch('/api/user')
  .then(res => res.json())
  .then(data => {
    console.log('模拟用户信息：', data);
  });
```

## 可使用的复用资源文件

[《一个较为完整兼容IE的Polyfill脚本文件》](/admin/Blog/SeeMarkdown?id=1466)