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