一入前端深似海，而我只是在浅海游了几个来回。
初识
在我还在上大学的时候用 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/
