可读性：★★★★✰ 理解难度：★★★✰✰
概述
在使用我们控制不了的代码时，必须要划清边界，减少耦合，确保未来的修改不至于代价太大。
一、使用测试用例
使用第三方包时，增加一些关键的测试用例。当修改和替换的时候，通过运行测试用例的方式来验证程序是否正常。下面是使用 mocha + chai 两个测试框架对utils包中的验证身份证方法的用例。
如果有一天，我们更换了验证身份证的算法，可以通过跑测试用例的方式，保证切换后程序的可用性。
import { expect } from 'chai'
import { checkIDCard } from '@/utils'
describe('验证身份证号码', () => {
it('正确的号码', () => {
const num = '120109200109050607'
expect(checkIDCard(num)).to.be.ok
})
it('错误的号码', () => {
const num = '220109200109050607'
expect(checkIDCard(num)).to.not.be.ok
})
})
下面是在vue项目中用vue-cli生成项目时，选择需要测试用例的选项后，自动生成的测试用例，用于对页面渲染后元素正确性的检测。
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
二、使用适配器
对于第三方包，或者一个相对稳定的模块的调用，我们尽量不要修改其内部代码。可以使用适配器的方式使用它，这样可以减少发生问题的可能性。
就好比，当我们给电脑安装一个原本不适配的显示器，我们的方式最好是增加一个转接头，而不是修改电脑上的接口方式。
graph TD
Module1 --> Adapter-适配器 --> Module2
比如：
<template>
<menu-group :options="options"></menu-group>
</template>
上面的menu-group组件菜单接收的options参数格式如下
const options = [
{ id: 1, name: '菜单1' },
{ id: 2, name: '菜单2' },
]
而当我们业务中获取到的真实options如下：
const realOptions = [
{ code: 1, label: '菜单1' },
{ code: 2, label: '菜单2' },
]
组件数据格式是id，name属性，而真实给的是code，label的属性。
这时我们有两个选择：
- 修改menu-group组件内部实现
- 改变realOptions数据结构
当然比较可靠的方式是第2种：
function optionAdapter(realOptions) {
return realOptions.map(item => {
item.id = item.code
item.name = item.label
return item
})
}
三、总结
减少修改第三方代码中的东西，避免过度依赖。依靠你能控制的东西，好过依靠你控制不了的东西，免得日后受它控制。
本文参考《代码整洁之道》（Robert C. Martin著，韩磊译）。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端，欢迎来撩，有意向可发送简历到chen_zhen@dahuatech.com，长期有效
上一篇：七、错误处理
下一篇：九、单元测试
