如何衡量一个人的 JavaScript 水平？

•作者：陈大鱼头•github： KRISACHAN[1]

前言

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

原文如下：

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也同样适用。

不知道你是通过什么方式来衡量一个的JavaScript水平的呢？欢迎留言区域回复互动。