如何取消button的点击特效_如何衡量一个人的 JavaScript 水平?
如何衡量一个人的 JavaScript 水平?
- 作者:陈大鱼头
- 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 也可以扫码添加好友,备注“知乎”就行
如何取消button的点击特效_如何衡量一个人的 JavaScript 水平?相关推荐
- 取消button的点击效果_(Vue动效)6.Vue中列表过渡效果
关键词:列表过渡<transition>过渡 一.实现:每点击一次按钮,就会增加一条数据 <body><div id="root"><di ...
- button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
- 阻止button默认点击边框_如何消除button/button标签的默认样式
在不添加任何样式的情况下,以下的html代码呈现如下: 1 2 3 4 5 6 7 8 9 上面是在谷歌浏览器中的默认样式.可以发现默认带有padding和border. 我们可以添加以下代码来消除默 ...
- 网页鼠标点击特效案例收集(直播间红心同理)
1. 鼠标点击出随机颜色的爱心 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- android仿知乎按钮动效,Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解...
先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几 ...
- 移动端取消button点击出现阴影效果
为什么80%的码农都做不了架构师?>>> 移动端取消button点击出现阴影效果 -webkit-tap-highlight-color: rgba(255, 255, 255 ...
- 纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化 效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
- javascript特效_如何在网页添加鼠标点击特效
经常有同学问我怎么做到的,本论坛属于DZ当然用的是插件啦. 偶然在网上找到一个关于wordpress的特效代码,分享给大家. WordPress 添加鼠标点击特效 实际上这种教程在网上搜索一下有一大堆 ...
- 代码android点击效果,GitHub - likaiyuan559/TouchEffects: Android View点击特效TouchEffects,几行代码为所有控件添加点击效果...
Android 点击特效TouchEffects TouchEffects能够帮助你更快速方便的增加点击时候的效果,TouchEffects的目标是打造一个稳定.全面.且能更方便的自定义及个性化的一款 ...
最新文章
- android 快速点击开启某功能(不如快速点击打开开发者模式)
- java实现收货7天发通知,Java实训的第7天
- LNMP_ 配置文件
- PowerShell-4.API调用以及DLL调用
- java与html关联_java-如何在HTML文件中搜索某些标签?
- python平方数迭代器_Python三大神器之迭代器详解
- 使用Android简单实现有道电子词典
- 【物理】概念的理解 —— Phase(相位)
- springMVC之自定义视图
- 掌管大局的IoC Service Provider
- Qt保存日志调试信息输出文件
- python萤火虫算法_一种萤火虫算法优化神经网络的短期负荷预测方法与流程
- 有了RK Easywork轻松在线组装标准工作台
- 居民身份证号码的含义
- 重装系统后开机启动项菜单如何删除
- 最长的指定瑕疵度的元音字串 —— 最优解法(C++实现)
- Windows10一句话从administrator权限提升到system权限
- 毕业季好难抉择丨考研还是工作我该选哪一个?!
- 多设备时设置default serial的方法
- Reducing the Number of Gray Levels, Zooming and Shrinking Images
热门文章
- Django项目之小博客
- Python - 3.6 学习三
- TLSAlloc()
- Intellij IDEA 使用Spring-boot-devTools 没有生效 解决方法
- Win2008 远程时提示“要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限“的解决方法
- 解决首次访问jenkins,输入默认密码之后,一直卡住问题
- u盘属性显示制造商不可用问题的解决方法
- ngFor with index作为属性中的值
- 如何在ImageView中缩放图像以保持纵横比
- 如何动态合并两个JavaScript对象的属性?