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

陈大鱼头 ... 2021-8-3 Js
  • 前端
  • Js
  • 面试
  • 进阶
About 6 min

# 如何衡量一个人的 JavaScript 水平?

# 前言

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

原文如下:

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>
1
2
3

# 单元测试

在我们开发的过程中,有一道麻烦但又必不可少的工序就是单元测试,这时候单元测试的库我们是怎么选?用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)
  })
})
1
2
3
4
5
6
7
8
9
10
11

# 其它

其它的诸如开发文档,使用文档,版本迭代,项目配置,打包开发优化,以及其他自动化的功能,也是我们所需要考虑。

# 总结

以上便是我们在开发一个“按钮(<Button>)组件”时可能会考虑到的点,可能有不够完善的地方,但是我想说的意思是,这其实可以很好的衡量一个人的JavaScript水平。比如你再会手写原型链关系图,闭包,防抖,节流等基础概念,但是如果不在项目中运用起来,终究是纸上谈兵,对技术水平没有太多实质的帮助,当然不是说精通这些内容不好,但是比起实战,还是差强人意。

能手写代码的不一定是高级,但是如果能写好一个组件,水平再差也不会差到哪里去。

本文似乎有点文不对题了,本来谈的是“如何衡量一个人的JavaScript水平”,结果却超纲了许多。但是通过这种方式,确实能够判断出一个人代码水平,当然也并不只是JS,换成安卓,IOS也同样适用。

# 后记

如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。 鱼头的微信号是:krisChans95 也可以扫码关注公众号,订阅更多精彩内容。 https://bucket.krissarea.com/blog/base/qrcode-all1.png

Last update: June 25, 2023 00:16
Contributors: fish_head , 陈大鱼头