项目是检验前端是否合格的标准
友情提示:这不是一篇技术文章,几乎都是文字没有代码,适合刚入门前端亦或者是跟我一样觉得前端还有很多东西需要去学的童鞋
入门前端2年多,算上各种加班的话应该是3年,一直标榜自己“全栈工程师”。然而从近一次持续了三个月的项目中感受很深,方知前端合格很难,更别谈优秀,这条路还有很多东西需要去“品”。
谈谈自己前端历程
我要谈的前端,严格意义上是大前端。因为在腾讯一些公司是有重构
岗位(现在改成UI
部门,其实都差不多,就是负责页面的HTML
跟CSS
视觉效果还原)以及JavaScript开发
岗位(负责产品的数据以及交互层次的研发)的。我之前的工作岗位是前端设计师
,也就是重构
,每天重复着切图仔
的角色感觉有点厌烦了(现在挺怀念当时的日子~),于是开始接手写一些JS
效果,但还是比较简单的,比如轮播、导航这一类简单的交互效果。
再后来,折腾Node
,玩Nginx
,搞Mysql
/Mongo
,一项新的技术出来赶紧学,什么Angular
/Vue
/React
统统学一遍,然后,开始标榜自己为全栈工程师。
就这样,现在成为了大前端的一员,我不确定这是否是未来的一种趋势,但就这样子一直在路上。直到最近这次持续了3个月的项目,多人协作下才深刻感受到:别谈优秀,合格都很难。
一一论证
下面我将在我所有感受的方面来一个个的吐槽讨论,基本上谈到的例子都是我项目中真实的例子。
在开始之前得先介绍一下技术背景:基于React
的Redux
封装的一套自己的SDK
的基础上,写各种React
组件然后封装到内部的npm
模块,最终将这些模块堆砌输出到页面,目前共输入100多个组件。
编码
抛开结构
、表现
、行为
分离,JSX
也就是在React
盛行之下才活得下来。那么写组件的时候也是在写结构
、表现
以及行为
,只是把这些都放在了一个.jsx
文件里面。然后有一次看到一个小伙伴写的组件,一套结构下来全部都是div
/span
,没有任何其他的标签了;还有一次有个小伙伴让我改一下我的组件,其中我用了h2
的标签说不要加粗让改成p
标签。
我们先不考虑SEO
,一段语义化的代码就直接映射一个前端的思维。你在路边看到一排树脑海里想到ul
,你在房间看到挂在墙上的一幅画脑海里想到margin
/padding
/width
/height
,你在看文章的时候能想到h1
/h2
/section
/article
,而不是看到任何事物都是一个div
以言之。告别了table
时代,迎来了div
时代?别!
然后,讲完了结构
,来讲讲表现
,也就是CSS
,一个好的重构工程师
能够以最小颗粒度的CSS
写出最优雅的样式,那么在协同的情况下,各种违和的命名就出来了,我们都知道姓氏命名法
、BEM命名法
,但在项目紧急的情况下就失去了这个原则?然后各种随手写出来的命名就这样子出现在代码上了,比如:.right
、.weixuanzhong
,恩,后面的表示未选中,还好我拼音学得好。
最后一点,跟百度的同学也了解过,自己之前的团队也一样,写CSS
属性的时候都会有一套先后顺序约定,虽然要求有点高了,但是对以后代码的维护以及浏览器加速渲染CSS都很有帮助:
- display/position/top/left/margin/padding/ 最外层属性
- width/height 元素自身属性
- font族属性/color/background 元素外观属性(color跟background总是成对出现)
- z-index等属性
UI是给用户看的,但代码是我们自己写并且需要维护的,写“好”的代码很重要。
UI交互
无线大行天下的时代,细腻的UI给用户的感知是最明显的,当ios8
出来的时候就伴随着0.5px
的边框出现,而到现在为止有多少个项目能够真的把这考虑进去,最后自己在周末花了几个小时的时间给所有的组件都加上了0.5px
的边框,当然了我只是用JS
去判断是否ios8
设备及以上然后打入类到html里面,安卓用户对不起了。
触摸屏的出现就会有触摸态的UI交互。一个按钮手指按下去的时候用户知道了么?我们作为开发习惯了在chrome模拟器
下进行页面的开发,更看重于逻辑是否正常,忽略了这些感官最强的UI交互,一个简单的:active
类加上去体验还是差很远。
学过了CSS3
的transition
之后,各种需要“动起来”的东西我们都很喜欢用transition
来实现,比如底部弹出层,从bottom:-100%
到bottom:0
的效果加上transition
就会有过渡上来的效果。但是,直接用top
/bottom
/left
/right
这一类的属性加上transition
在手机上是很卡顿的,毕竟性能瓶颈在那里。所以一般动效都用transform
的translate3d
等属性去实现,什么GPU
加速能用上的都用上,再碰到坑继续折腾。
自测
有多少写H5
页面的童鞋能够用真机来进行测试的?当测试给你提页面乱位的bug的时候,第一反应打开chrome模拟器
然后跟他截个图说没问题呀,然后心里骂道:傻逼测试。sorry,我有一次这么干了,但当我突然想起我忘记在真机上测试的时候就非常对不起测试同学。
自测是对自己负责任的最基本要求,你不能要求测试帮你测所有的东西,虽然测试就是在干这么一件事情。但你自己做的东西自己至少测试没问题,测试帮你发现你没有发现的问题,那才是最美好的事情。
未完待续
洋洋洒洒废话了一大堆,也许大家看到的时候会不屑,但这真的就出现了这些问题,作为一个合格的前端这些是最基本基本的要求,这是入门就必须要做到的。
由于肚子饿的关系,今天先写到这里,还有几个方面等有空继续写,当然了,都是非技术难题的方面,纯粹就最基本的要求但却最容易被忽略了的。