如何衡量一个人的 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((

添加

))

expect(wrapper.text('添加')).to.equal(true)

})

})