作者：陈大鱼头

github： KRISACHAN

前言

之前刷知乎的时候，看到这么一个问题：“如何衡量一个人的 JavaScript 水平？”然后自己也不要脸地回答了一下这个问题。以下是我的答案：

原文如下：

A：看一个人写代码是否有规范，代码是否壮健，是否可拓展，可读性高不高，API设计是否合理。

这些都是长年累月积累下来的且独立于编程语言以外的。

远比把什么手写bind，原型链，闭包给背下来更有价值。

这才是证明你代码水平的关键点。

Q：在面试的时候如何快速判断出呢？

A：让面试者设计个组件，不用写，回答就行。从API设计，文档编写，项目结构，单元测试，编写模式，性能优化等方面来回答。

有工作经验的人，基本业务逻辑都能写，但是写的好不好，就是经验跟能力以及学习力的体现。

个人说明

首先来个免责声明，以上的回答都是个人的经验与见解，答案肯定不唯一，甚至不一定全对，所以求轻喷。

上面问如何在面试的时候快速判断对方是否是高级前端的时候，我为什么说是“设计组件”呢？

因为我觉得有一定实力的前端来说，“组件”这个概念是绕不过的，或者看过开源组件的源码，或者自己写过组件。

对于一般的业务问题，我相信作为一个从业了一定时间的开发者，无论水平如何，这都不是问题，但是如何区分这个开发者的水平，可以通过他写的代码来判断，当然也不完全是，毕竟在996或者赶进度的时候，很容易就会为了完成快速出产品而写，这种情况下代码质量跟个人水平不一定能体现。

下面，我们以设计一个“按钮（<Button>）组件”为例，来探索这个问题。

首先“按钮（<Button>）”的作用这个我们是否明确？它是装饰性的组件还是功能性的组件？

这个问题很简单，“按钮（<Button>）”是一个功能性的组件，是让用户通过点击或触碰来采取行动并做出选择的一个组件。

场景

那么“按钮（<Button>）”通常放在什么地方？有经验的开发可能会想到以下场景：

对话框
模态窗口
表单
卡片
工具栏

代表状态可能会有以下几种：

默认状态
初始状态
信息状态
警告状态
危险状态

形态可能会有以下几种：

实心按钮
文本按钮
描边按钮
图标按钮
圆角按钮
直角按钮

尺寸可能会有以下几种：

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'

<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 也可以扫码关注公众号，订阅更多精彩内容。

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all.png