前端性能优化五十四：mock方案

1. 代码侵入:

直接在代码中写死Mock数据,或请求本地JSON文件

(1). 缺点:

①. 和其它方案比mock效果不好.
②. 与真实server环境的切换非常麻烦,还需要删除代码,一切需要侵入代码切换环境的行为都是不好的.

---

2. 请求拦截mock.js:

①. mockjs是一个插件,定义了一套规范:
    a. 原理是重写html http request,只支持ajax,不支持fetch

②. https://github.com/nuysoft/Mock/wiki/Getting-Started

③. 环境:
    a. 本地搭建
    b. 线上平台:RAP2(淘宝)、Easy-mock

(1). 本地example:

yarn add mockjs -D

Mock.mock(/\/api\/visitor\/list/, 'get', {
  code: 200,
  msg: 'ok',
  'data10': [
    {
      'id|+1': 6,
      'name': '@csentence(5)',
      'tag': '@integer(6, 9)-@integer(10, 14)岁 @cword("零有", 1)基础',
      'lesson_image': "https://images.pexels.com/3737094/pexels-photo-3737094.jpeg"
    }
  ]
})

(2). easy-mock:

①. 基于mockjs封装好的一个平台.

②. 数据格式:
    {
      "code": "200",
      "result": {
        "list|10": [{             // 生成10条数据
          "id|+1": 1,             // +1操作,后面1是默认值
          "userName": '@cname',   // 使用中文随机姓名
          "sex|1-2": 1,           // 在1-2中生成数据
          "address": '北京昌平'
        }],
        page: 1,
        page_size: 10,
        total_count: 30
      }
    }

(3). 优点:

①. 与前端代码分离.
②. 可生成随机数据.

(4). 缺点:

①. 数据都是动态生成的假数据,无法真实模拟CURD的情况.如增一个、删一个都是假数据.
②. 重写http request的原理,只支持ajax,不支持fetch.

---

3. 接口管理工具:

rap(阿里)、swagger、moco、yapi(去哪儿)

(1). 优点:

①. 配置功能强大,接口管理与Mock一体.
②. 后端修改接口Mock也跟着更改,可靠.

(2). 缺点:

①. 配置复杂,依赖于后端:
    a. 可能会出现后端不愿意出手.
    b. 或团队人少,配置完成了,接口也差不多开发出来了.
②. 一般会作为大团队的基础建设而存在,没有这个条件的话慎重考虑.

---

4. 本地node服务器:

json-server

(1). 优点:

①. 配置简单,甚至可以0代码,30秒启动一个Rest API server.
②. 自定义程序高,可重写node代码.
③. CURD是真实模拟.

(2). 缺点:

①. 与接口管理工具相比,无法随着后端API修改而自动修改.