一入前端深似海，而我只是在浅海游了几个来回。

初识

在我还在上大学的时候用 servlet 写 java web 的程序，那个时候想要在网页判断用户的输入提交，发现需要一种叫 JavaScript 的语言，一开始照着 w3c 直接用原生 JavaScript 操作 Form，w3c 没有就自己吭哧吭哧 Google 然后继续抄，那个时候天空很蓝，Google 还没退出中国，我每天用 Google Buzz 不亦乐乎。

当然，那个时候的我对 CSS 也是一窍不通，也才刚刚听过 jQuery。

入门

无意中看了一本 JavaScript DOM高级程序设计发现 JavaScript 原来没有那么简单，于是寻迹着又看了一本精通CSS与HTML设计模式又发现 CSS 也没有那么简单。

乍看书名这两本书对于刚刚入门的新手都显得似乎有些深奥，而事实是这两本书都是讲解原理性的知识，对于系统性了解 JavaScript 和 CSS 有很好的启发。

入门到放弃

第一份工作是 java web 的后端程序员，从那时起我就有了一个身份:"后端程序员"。

后端在岗位界定上是和前端相对应的，后端负责用户看不见的逻辑，前端负责看得见的逻辑，也就是在后端基本没有机会写 JavaScript 和 CSS，当时的部门前端有10多个人，业务全部构建在 prototypejs 之上。年少轻狂，工作中不用的，很少会花时间学习，我的前端还没有完全入门就这样逐渐放弃了。

创业中再次相遇

移动互联网兴起之时，我也头脑发热觉得自己应该去创把业，于是误打误撞进入了创业公司。

所谓创业带来机遇、财富、梦想在现实中其实就是人少、钱少、活多，虽然我还是个后端程序员，但是这个界定已经没有那么明显了，偶尔还是会写点HTML。

和前端协商 API 以及页面模板中要返回什么的样的数据，这是创业时做后端程序员经常要做的。

起初，前端需要什么样的数据后端就直接给，前端不懂后端的逻辑，后端也看不懂那些复杂的 JavaScript 和 CSS。

当项目越来越复杂，没有约束的直接输出导致后端业务逻辑不具有了可预见性，约束势在必行，因此也导致了和前端的分歧开始明显。

分歧是什么？前端希望数据都可以灵活的输出，而后端为了统一严格限制了 API 的职责，此时前端不得不多次调用不同的 API 进行再次组装。这个分歧其实就是 Facebook 出品的 graphql 要解决的，而在当时我和前端都是无解的。

有了这个分歧，我开始关注前端是如何构建和使用后端的数据，换位思考站在前端的角度去想问题。

空想误国，实干兴邦，由于缺乏实践，我的换位思考流于了形势，毫无进展。

突然有一天，我还在努力让自己顿悟，前端却离职了，更要命的是原来所有我负责对接的前端业务将有我接管。

真心不懂，只能学了。

实战

理想是美好的，现实是复杂的。为了更好的维护前端代码，决定重构。

重构之路漫长而艰难，仅仅只有一个月的时间，却长的像半载。

开始

首先突击学习 JavaScript，基本语法我已经懂了，重构的目标是获得更好的可维护性，代码复用是最起码的要求，熟悉 JavaScript 的继承是非常必要的。

首选了 JavaScript 语言精粹一书，为了速成只看其中函数和继承的部分，基本对类模式继承和原型继承有了清晰认识，重构就这样开始了。

重构中遇到了很多 JavaScript 的细节都不是很懂，基本是一边 Google 一边翻书完成，还买了 JavaScript 权威指南做参考。

项目用的是 jQuery ，其官方文档必不可少，为了追求性能对如何写出性能优异的选择器要了如指掌，Google 关键词 jQuery performance、optimize jQuery selector 会有很多相应的文章

https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551
http://www.artzstudio.com/2009/04/jquery-performance-rules/

规范

为了能保持一致性的 JavaScript 风格，查询和参考了大量规范

https://google.github.io/styleguide/javascriptguide.xml
https://github.com/styleguide

github styleguide 当时还只是 CSS 和 JavaScript 如何书写、交互的介绍，现在演变成 http://primercss.io/ 项目。

github styleguide 给出的一条建议是为每个页面绑定的事件 DOM 取一个唯一的可识别的名字用js- 前缀，这样做的好处是即使 DOM 结构变更了，只要js- 的名字保留，JavaScript 代码不需要更改，在当时大量采用模板生成的 HTML 页面，并且事件绑定都用 jQuery 完成的项目来说，这样的写法为维护性带来了很大提升。

css

当 html 页面的数量级近百时，想要 CSS 保持可维护性是非常不容易的事情，而且最大限度的复用不同 CSS 视图是非常考验架构功力的。CSS 绝对需要架构，参考无处不在的架构。

Jonathan Snook https://smacss.com/ 是当时最重要的参考，这本书为 CSS 的模块化和架构提供了足够的理论依据和实战技巧，网易的 http://nec.netease.com/ 提供了具有实际意义的 CSS 规范方案，github style guide 也介绍的大量的 css 命名和 html 结构解决方案，因而重构的 CSS 糅合了各家的特点，真正的“兼容并包”啊

工程

那个时候 webpack 还没有诞生，gulp 也不见踪影，less 和 gruntjs 是当之无愧的宠儿，前端工程少不了这两项。

模板自己用字符串拼接，ejs 太难用，而且嵌到页面中丑陋无比，当时还有 underscore ，这玩意和backbone结合起来才是最佳组合。

进阶

经过一次重构的实战，复杂的前端项目已经是老司机上道轻车熟路，从规范制定、技术选型、方案评定都能做到稳抓稳拿。

格斗技巧都学了，是时候练内力了。

再读《JavaScript 语言精粹》，这是本非常薄的册子，对 JavaScript 语言本身基本都能涵盖，虽然 ES 6 出来很多内容看上点过时， Douglas Crockford 的分析句句入里。

深入 JavaScript 运行时细节和有关原型的种种真相推荐 http://dmitrysoshnikov.com/ 的 ECMA-262-3 in detail，这是我读过的最透彻的关于 JavaScript 运行机制和 object 继承机制的解释。

MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript 这里包含最新 JavaScript 的概念和原理，文档组织的很好，内容真的做到了深入浅出，级别清晰，不同 level 的需求都能满足。

https://javascriptweblog.wordpress.com/ 此兄文章写得也够味，但比较晦涩。

入门 ES6 看阮一峰的 es6tutorial 就够了，看完可以立马实战不用想太多，当然现在 vuejs 、react、angular 这么火，http://babeljs.io/ 一出很多人早已经投入 ES6 的怀抱了。

学 nodejs 。

后记

工作中已经很少做关于前端的事情，前端发展迅速度令人咋舌，html5 和 CSS3 我是真的不会，人们称我为后端程序员，而我只是一个程序员。

推荐 wecatch 程序员落在深海 github @jerryshew ，美团任职大前端，而他不仅仅是一个前端。

附录

落在深海 https://github.com/jerryshew
阮一峰 es6tutorial https://github.com/ruanyf/es6tutorial
JavaScript DOM高级程序设计 https://book.douban.com/subject/3082278/
精通CSS与HTML设计模式 https://book.douban.com/subject/3158926/
prototypejs http://prototypejs.org/
graphql https://github.com/facebook/graphql
JavaScript 权威指南 https://book.douban.com/subject/10549733/
ejs http://www.embeddedjs.com/
underscore http://underscorejs.org/#template
ECMA-262-3 in detail http://dmitrysoshnikov.com/
MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://javascriptweblog.wordpress.com/
es6tutorial https://github.com/ruanyf/es6tutorial
smacss https://smacss.com/
github style guide https://github.com/styleguide

jquery selector optimize

https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551
http://www.artzstudio.com/2009/04/jquery-performance-rules/