共计 3164 个字符,预计需要花费 8 分钟才能阅读完成。
前端 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 一下:
- 首先在头部引入了
mockjs
-
而后引入了两个工具函数, 咱先不论干嘛的
import {builder, getBody} from '../util'
Mock.mock(/\/auth\/login/, 'post', login)
而后执行了 mock
__评估__:
- em~~~,每写一个 mock 模块就引一下
mockjs
库,反复了尽管就一条,__但还算能忍__。 - em~~~,为啥要引工具函数呢,为啥还要理解工具函数,还是两个!如果为了实现超出根本 mock 的性能领域,那讲不了,但就是 单纯 mock,这就有点。。。,__难忍了__。
- 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 一下:
- 首先每个文件都引入了 mockjs:解决🆗,em~~~只不过取而代之的是引入了
BaseMock
😂,(原本这句我都想省,但就放心代码搞的不好懂了,要不我差点拔刀🐶) - 关注点多:解决🆗
- 硬编码:解决🆗
__总结__:就是一个简略的数据结构,提供给你,配就完了,想 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 真的是那种,那种很少见的那种,神经病一样的难度。
贯彻思维的🌰
正文完