Mock既是盾牌，亦是武器

这是我参与更文挑战的第3天，活动详情查看： 更文挑战

前端 mock

如今开发模式通常都是先后端分离，那就免不了互相“迁就”，好比说后台只把接口文档大致定好了，接口还没出，做为前端的不能傻等着啊，可是不联调的去开发，不少细节就照顾不到，很容易就出现临近快交工的时候才出接口（这里不能狭隘的认为后台故意地，就是菜而已），当联调的时候才发现不少问题，那就太尴尬了，若是延误了，锅很容易就盖在了前端的头上，得想个辙：

• “请”后台加快速度并保证质量，这是一种办法，每次都要嘱托一下，拜托拜托。(每每没什么卵用图个心安。。。)
• 本身mock接口，更好地和后台“异步”开发，快速推动前端工做进度，尽早的暴露问题，给本身争取更多的时间去解决。

---

怎么用 mock

首先安装mockjs

yarn add -D mockjs
复制代码

而后看一下本身的网络请求库用的是啥：

axios:

...
	import Mock from 'mockjs'
	...
	
	Mock.mock(apiUrl, mock)
	...
复制代码

fetch：就得特殊处理一下

首先安装mockjs-fetch

yarn add -D mockjs-fetch
复制代码

而后

...
	import Mock from 'mockjs'
        import mockFetch from 'mockjs-fetch';
        mockFetch(Mock);
	...
	Mock.mock(apiUrl, mock)
复制代码

到此基本操做就搞定了，但这还不够。

---

怎么优雅的用 mock

我看过不少的项目，每每是写了一堆。。。。栗🌰：

import Mock from 'mockjs'
import { builder, getBody } from '../util'

const login = options => {
  const body = getBody(options)
  return builder(
    {
      id: Mock.mock('@guid'),			//这个@是mockJs的占位符，能够到官网了解一下，这个不重要，咱们主要codeReview
      name: Mock.mock('@name'),
      username: 'admin',
      password: '',
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
      status: 1,
      telephone: '',
      lastLoginIp: '27.154.74.117',
      lastLoginTime: 1534837621348,
      creatorId: 'admin',
      createTime: 1497160610259,
      deleted: 0,
      roleId: 'admin',
      lang: 'zh-CN',
      token: '4291d7da9005377ec9aec4a71ea837f'
    },
    '',
    200
  )
}



Mock.mock(/\/auth\/login/, 'post', login)

复制代码

首先我们品评一下，不知道是否是个人“审美”怪，我看这样的代码多少有点别扭。

codeReview一下：

1. 首先在头部引入了mockjs
2. 而后引入了两个工具函数,咱先无论干吗的

   import { builder, getBody } from '../util'
   复制代码

3. Mock.mock(/\/auth\/login/, 'post', login)而后执行了mock

评价：

1. em～～～，每写一个mock模块就引一下mockjs库，重复了虽然就一条，但还算能忍。
2. em～～～，为啥要引工具函数呢，为啥还要了解工具函数，仍是两个！若是为了实现超出基本mock的功能范畴，那讲不了，但就是 单纯mock ，这就有点。。。，难忍了。
3. what！！！，mock的接口地址竟然“硬了”，想一想硬编码所支配的恐惧，这简直，不能忍，不能忍 ！！！

总结：

重复（哪怕只有几条），关注的点多（哪怕只有几个），硬编码（哪怕只有一处），有能力重构就不能忍，咱们只是想mock数据，直接点，天然一点很差么，就像字面那样，我想“mock”一个“api”。

若是一个api是这样的：

import BaseApi from './baseApi'

let config = {
    fetchLightAdd: "/light/fetchLightAdd",
    fetchLightUpdate: "/light/fetchLightUpdate",
    fetchLightDetail: "/light/fetchLightDetail",
    fetchTestDataList: "/light/fetchTestDataList",
}

export default new BaseApi({ config })
复制代码

那么指望mock的样子应该是这样的：

import BaseMock from './baseMock'

let config = {
    fetchLightAdd: {
       ...
    },
    fetchLightUpdate: {
       ...
    },
    fetchLightDetail: (data) => {
        const { body = {} } = data;
        let params = JSON.parse(body);
        //在这里就各类模拟入参状况发挥不一样结果。
        if (params.id === "0") {
            return {
                code: "200",
                data: [{
                    lightName: "test_lightName_0",
                    comment: "test_comment_0",
                    lightItems: [{ lightItemId: 1, lightType: 0, baseSelect: 1, exclude: false }]
                }]
            }
        } else if (params.id === "1") {
            return {
                code: "200",
                data: [{
                    lightName: "test_lightName_1",
                    comment: "test_comment_1",
                    lightItems: [{ lightItemId: 1, lightType: 0, baseSelect: 0, exclude: 0 }, { lightItemId: 2, lightType: 1, baseSelect: 1, exclude: false }]
                }]
            }
        }

    },
    fetchTestDataList: {
        ...
    }
}

export default function mock(api) {
    new BaseMock({ config, apiConfig: api.getUrlConfig() })
}

复制代码

咱们再codeReview一下：

1. 首先每一个文件都引入了mockjs：解决🆗，em～～～只不过取而代之的是引入了BaseMock😂，（原本这句我都想省，但就担忧代码搞的很差懂了，要不我差点拔刀🐶）
2. 关注点多：解决🆗
3. 硬编码：解决🆗

总结：就是一个简单的数据结构，提供给你，配就完了，想mock哪一个接口，就写这个接口名字，真是字面那样：我想“mock”一个“api”，其余不须要你关注了，就这么简单且天然。

---

别忘了 mock 只在开发模式用。

根据环境动态引入：

{
    /* 配置mock启动 */
    const { NODE_ENV, MOCK } = process.env;
    if (NODE_ENV === "development") {
        if (MOCK != "none") {
            require('MOCK');
        }
    }
}
复制代码

发布打包的时候去掉，包体小点很差么：

配置webpak的选项：

//isEnvProduction根据process.env.NODE_ENVde值判断获得的
 externals:isEnvProduction?{
            mockjs:mockjs
 }:{}
复制代码

打包咱们看下：

首先Moderate打包速度仍是很快的，才21s，嘿嘿😁

而后看下报告：

---

结语

要求别人不如要求本身来的实际,mock确实能缓解很多压力，前端不容易，ta的难还不是那种～～～难，ta真的是那种，那种不多见的那种，神经病同样的难度。

贯彻思想的🌰