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真的是那種，那種不多見的那種，神經病同樣的難度。

貫徹思想的🌰