如何衡量一个人的 JavaScript 水平？
- 作者：陈大鱼头
- github： KRISACHAN
前言
之前刷知乎的时候，看到这么一个问题：“如何衡量一个人的 JavaScript 水平？”然后自己也不要脸地回答了一下这个问题。以下是我的答案：
原文如下：
A：看一个人写代码是否有规范，代码是否壮健，是否可拓展，可读性高不高，API设计是否合理。
这些都是长年累月积累下来的且独立于编程语言以外的。
远比把什么手写bind，原型链，闭包给背下来更有价值。
这才是证明你代码水平的关键点。
Q：在面试的时候如何快速判断出呢？
A： 让面试者设计个组件，不用写，回答就行。从API设计，文档编写，项目结构，单元测试，编写模式，性能优化等方面来回答。
有工作经验的人，基本业务逻辑都能写，但是写的好不好，就是经验跟能力以及学习力的体现 。
个人说明
首先来个免责声明，以上的回答都是个人的经验与见解，答案肯定不唯一，甚至不一定全对，所以求轻喷。
上面问如何在面试的时候快速判断对方是否是高级前端的时候，我为什么说是“设计组件”呢？
因为我觉得有一定实力的前端来说，“组件”这个概念是绕不过的，或者看过开源组件的源码，或者自己写过组件。
对于一般的业务问题，我相信作为一个从业了一定时间的开发者，无论水平如何，这都不是问题，但是如何区分这个开发者的水平，可以通过他写的代码来判断，当然也不完全是，毕竟在996或者赶进度的时候，很容易就会为了完成快速出产品而写，这种情况下代码质量跟个人水平不一定能体现。
下面，我们以设计一个“按钮（）组件”为例，来探索这个问题。
首先“按钮（）”的作用这个我们是否明确？它是装饰性的组件还是功能性的组件？
这个问题很简单，“按钮（）”是一个功能性的组件，是让用户通过点击或触碰来采取行动并做出选择的一个组件。
场景
那么“按钮（）”通常放在什么地方？有经验的开发可能会想到以下场景：
- 对话框
- 模态窗口
- 表单
- 卡片
- 工具栏
代表状态可能会有以下几种：
- 默认状态
- 初始状态
- 信息状态
- 警告状态
- 危险状态
形态可能会有以下几种：
- 实心按钮
- 文本按钮
- 描边按钮
- 图标按钮
- 圆角按钮
- 直角按钮
尺寸可能会有以下几种：
- small
- medium
- large
操作性可能会有以下几种：
- 回车键点击
- 鼠标点击
- 触摸点击
- 禁止点击
携带的事件可能有以下两种：
- click事件
- 回车键keydown事件
- tap事件
以上虽然是偏样式，但是作为一个组件开发者，这都是我们日常所需要考虑的。
API
在API的设计环节，我们通过上述的场景，我们可能会暴露出以下的API
- type：按钮状态
- size：按钮尺寸
- color：按钮颜色
- text：按钮内的文本
- icon：按钮内的图标
- htmlType：原生按钮支持的type属性
- attrs：其他的原生属性
- variant：按钮形态
- click：鼠标点击事件
- tap：触摸屏点击事件
- keydown：回车键按下事件
编写核心逻辑
在我们API设计好之后，我们就可以开始开发了，这时候根据我们项目的类型，选择的开发工具以及模式，可能会有所不同。
我们是独立编写还是直接在项目里面去编写，如果是独立编写，选择哪个打包工具，是gulp还是webpack还是其它，为什么这么选？
例如如果我们是用TS写，我们可能需要编写Button.d.ts，如果是vue的组件，我们还得考虑Vue.use注入到Vue中，也就是Button.install(vue)，如果是react，我们还得考虑是否使用React.forwardRef来进行ref转发。
然后就是我们的代码规范，是用Function还是Class，共同的代码块如何抽象，如何，还有命名规范是什么，哪些属性必选，哪些属性可选，默认值是什么？我們是怎么考虑的？
所以最终的组件使用可能会是这种形式：
import Button from './componenet/Button'
添加
单元测试
在我们开发的过程中，有一道麻烦但又必不可少的工序就是单元测试，这时候单元测试的库我们是怎么选？用Jest还是Mocha？测试用例怎么写？如何模拟点击或者异步响应？是否需要快照（snapshots）？这也是在我们的考虑范围内。
所以我们的测试脚本可能长这样：
import Button from './componenet/Button'
import { shallow } from 'enzyme'
describe('', () => {
it('render success', () => {
const wrapper = shallow((
<Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />添加</Button>
))
expect(wrapper.text('添加')).to.equal(true)
})
})
其它
其它的诸如开发文档，使用文档，版本迭代，项目配置，打包开发优化，以及其他自动化的功能，也是我们所需要考虑。
总结
以上便是我们在开发一个“按钮（）组件”时可能会考虑到的点，可能有不够完善的地方，但是我想说的意思是，这其实可以很好的衡量一个人的JavaScript水平。比如你再会手写原型链关系图，闭包，防抖，节流等基础概念，但是如果不在项目中运用起来，终究是纸上谈兵，对技术水平没有太多实质的帮助，当然不是说精通这些内容不好，但是比起实战，还是差强人意。
能手写代码的不一定是高级，但是如果能写好一个组件，水平再差也不会差到哪里去。
本文似乎有点文不对题了，本来谈的是“如何衡量一个人的JavaScript水平”，结果却超纲了许多。但是通过这种方式，确实能够判断出一个人代码水平，当然也并不只是JS，换成安卓，IOS也同样适用。
如果你喜欢探讨技术，或者对本文有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。
鱼头的微信号是：krisChans95
也可以扫码添加好友，备注“csdn”就行
