为了账号安全,请及时绑定邮箱和手机立即绑定

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

前言

之前刷知乎的时候,看到这么一个问题:“如何衡量一个人的 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也同样适用。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消