友情提示：这不是一篇技术文章，几乎都是文字没有代码，适合刚入门前端亦或者是跟我一样觉得前端还有很多东西需要去学的童鞋

入门前端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都很有帮助：

  1. display/position/top/left/margin/padding/ 最外层属性
  2. width/height 元素自身属性
  3. font族属性/color/background 元素外观属性（color跟background总是成对出现）
  4. 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，我有一次这么干了，但当我突然想起我忘记在真机上测试的时候就非常对不起测试同学。

自测是对自己负责任的最基本要求，你不能要求测试帮你测所有的东西，虽然测试就是在干这么一件事情。但你自己做的东西自己至少测试没问题，测试帮你发现你没有发现的问题，那才是最美好的事情。

未完待续

洋洋洒洒废话了一大堆，也许大家看到的时候会不屑，但这真的就出现了这些问题，作为一个合格的前端这些是最基本基本的要求，这是入门就必须要做到的。

由于肚子饿的关系，今天先写到这里，还有几个方面等有空继续写，当然了，都是非技术难题的方面，纯粹就最基本的要求但却最容易被忽略了的。