前端学习路径加强版——来自《前端养成记》

前端技术集合

本博文原载于博客“前端养成记”

前言

这篇文章是我们工作室内部 Wiki 的前端部分。下午时分心血来潮写了很多，对于前端新人算是不错的学习路径指南，遂整理成博文。

另，前两周也写了一篇前端自学路径的博文，但是重点偏向于漫谈前端发展历程了，前端自学路径这部分写得不够详细和具体。

本博文算是一个补充，遂叫《前端学习路径加强版》。

正文

明确你的意愿

其实不管是前端还是后端，首先要清楚，自己是想从事业务型的技术工作，还是 Research 型的技术工作。

前者可以理解为：互联网公司的程序员。业务型的前端工程师，最大的一个特点是：从客户需求出发，去真真正正地做出一个产品来，交付客户，让客户满意，并对客户产生实际的价值，这也是大部分互联网技术从业人员的工作内容。业务型的技术人员使用的技术往往不是最新的前沿技术，而是经过验证的效益更高的技术，用最小化的成本来服务客户。这需要不停地实践与实战，以便更快、更高效地实现客户需求的满足。

后者可以理解为：行业的科学家。这种角色时常走在行业的前面，去带领互联网公司，甚至是技术行业，探索更先进的技术、挖掘更有价值的数据、构建服务大众的基础设施平台等……

目前，绝大部分互联网技术人员都从事着业务型的技术工作，少部分极其优秀的技术人员可以从事 Research 型的技术工作。文章一开始就强调要了解清楚自己想从事的是哪个类型的技术工作，目的是树立一个终极目标。而要从事 Research 型的技术工作，首先必定是需要多年的业务型技术工作的经验积累的。

补充一个题外话

很多没有接触过编程的人都以为编程很难，要具备很高的数学能力，是因为他们往往都把“编程”这个活动理解为从事 Research 型的技术工作了。这是他们的一大误区。

其实大部分的编程活动，都是对“业务逻辑”的理解，然后用代码拼凑出产品和服务，这里面涉及到多深的数学知识？我看不多……

编程的总体思路就像是写书。写书前，你已经识字了，这是你的基础，你还会运用积累下来的一些表达技巧，让你的书更加吸引人，实现更高的销量。写书前，你已经知道了很多前人规划好的、约定俗成的东西了，而你要做的是，利用这些约定俗成的东西，去写一本自己的书。这本书可以参考前人的书，也可以参考已有的论文。

编程，往往是一个创造过程，而不是一个发明过程。

前端入门指南口语版

前端作为一个新兴工种和职业，它一直未能有幸像 Java、C 等后端语言一样，进入高校，成为一门课程。这就导致几乎所有的前端工程师，要么是从后端工程师转型而来，要么从设计师转行而来，都靠自学成才。而我也发现，校内极少人从事前端开发，大部分人都走后端和客户端路线。

而前端从诞生至今，一直未能跳脱 HTML、CSS、JavaScript 这三门“语言”。自然地，入门指南当然围绕三者讲起：

HTML、HTML5

记住至少 90% 的 HTML 标签及其语义，重点是 header、footer、article、main、section、nav、aside 这种语义特别明显的用于布局的标签。

CSS、CSS3

记住至少 90% 的 CSS 属性与写法，重点是盒模型（margin、padding、border、box-sizing）、页面布局相关（position 的用法、淘宝的双飞翼布局）、页面渲染相关（背景、阴影、字体样式等）……

以上是编写静态页面的基础，重点是多实践。

Bootstrap

CSS 框架 Bootstrap 应该是大部分前端工程师绕不过的一个点。它流行到以至于现在有些前端开发人员都刻意避免使用 Bootstrap 来防止页面撞脸了。

即使如此，还是阻挡不了大部分前端开发人员使用它的热情。毕竟它能帮助我们快速实现页面响应式布局、快速编写出可交互的页面。

我的建议：觉得 HTML、CSS 基础了解得差不多了，我主张先学习 Bootstrap，重点是学会 Bootstrap 的栅格系统及其原理，了解响应式网页设计是如何实现的，能够用 Bootstrap 拼出一套管理后台界面。

Bootstrap 的进阶用法就是：自行定制 Bootstrap。虽然已有 Bootswatch 这样的第三方 Bootstrap 主题能满足大部分一般需求，但总有些时候需要自定义样式。而在使用 Bootstrap 的过程中，修改 Bootstrap 默认主题的最佳方式不是覆盖默认设置，而是自定义主题后构建出自己的 Bootstrap 主题。

关于定制 Bootstrap 主题，官网上有一个现成的网页。而如果要在自己的电脑定制，需要掌握 LESS 或者 Sass（两者都是 CSS 编译器，为编写 CSS 引入了编程语言的变量、复用等特性）。

JavaScript

我个人是从设计师转型而来的前端工程师，所以偏重页面的设计、对设计稿的还原程度、更好的页面语义和页面布局、SEO 等，对 JavaScript 的了解并不深。这样的角色，在腾讯的岗位叫 UI 开发或网页重构。小公司的话，不分前端工程师、网页重构工程师、UI 开发工程师。所以遇到以编写 JavaScript 为己任的前端开发工程师，我的 OS 是这样的：

没想到你是这种前端工程师。

哈哈，开个玩笑。回到正题上来：

由于上面提到的缘由，对于 JavaScript，我主张是边用边学。当然首先是要已经看过 W3School 的 JavaScript 文字教程，了解 JavaScript 在浏览器中的能力（操作 DOM、BOM，知道 AJAX 是什么），并知道它拥有什么样的 API，什么效果能实现，什么效果不能实现。当 JavaScript 用于编写程序逻辑时，要知道需要用到什么语法、内置方法、内置 API。再后来，是了解 HTML5 中 WebSQL、Web Storage（Local Storage 和 Session Storage）、应用缓存（Application Cache）、Cookie 是怎么回事，能实现什么功能。

以上算是接触并使用 JavaScript，还没进入大量实战阶段。

jQuery 与 Zepto.js

我的主张是，JavaScript 一开始并不需要学得太深。对于业务型的前端工程师，完成上面提到的 JavaScript 部分，基本就够用了。

而基本上，一定要做的一件事是：学习 jQuery、Zepto.js（人称移动端的 jQuery）。两者的实现极其相像，可以只学 jQuery，Zepto 基本就无师自通了。

jQuery 和 Zepto.js 之于 JavaScript，就像 Bootstrap 之于 HTML 和 CSS。都是为了简化代码、更高效地完成业务而开发的 JavaScript 类库。它们封装了很多原生 JavaScript 的语法和方法，使之编写代码时更方便，同时保证对旧版浏览器的兼容性。

对于两者，建议：了解如何使用 jQuery 操作 DOM、常用的数据处理方法（数组项如何增删查改、对象如何访问及选取、方法如何调用、JSON 数据如何处理及使用）。

所谓中级前端工程师

所谓中级前端工程师的范畴：学会使用前端工具。

工具包括但不限于：

• Sublime Text、Atom 等代码编辑器（认真记住各种快捷键，好好阅读各大编辑器的插件使用说明）。

• 方便前端开发的利器：浏览器自动刷新 Browser-sync、调试工具 Chrome 控制台、Fiddler 和 Weinre、模拟请求 Postman、图片压缩 iSparta……

• Node.js 平台下的 NPM（一个集合了几乎所有优秀前端开源项目的社区，用来管理项目中用到的开源技术、资源、插件等）

• CSS 预处理器与后处理器：Autoprefixer、PostCSS（一个庞大的社区，提供各种 CSS 处理能力的插件）。

由于各大浏览器对标准 CSS 的支持情况不一样，都或多或少地拥有带自身特殊前缀的私有 CSS 属性，例如 -webkit-border-radius 这个私有 CSS 属性是 Webkit 内核的浏览器所支持的写法。

以前没有 CSS 预处理器与后处理器时，往往需要前端开发人员手写带有各种特殊前缀的私有 CSS 属性。有了这些处理器之后，只需要写标准的 CSS，如 border-radius，再用这些处理器处理一下 CSS，就能自动补齐浏览器私有 CSS 属性，实现前端页面的最大化兼容性，例如兼容 IE9、IE8 等等……

当然，这个栗子只是众多 CSS 预处理器与后处理器最简单的一个应用而已，还有更多高阶属性与使用技巧。

• JavaScript 编译器：之所以 JavaScript 有编译器，是因为自从 2015 年，JavaScript 的标准制定组织 ECMAScript 委员会决定今后每年都推出新版的 ECMAScript 标准，也就是新版的 JavaScript。而又因为各大浏览器的开发进度不同，对新标准的实现还没完全跟进，而一些喜欢追新的前端开发人员又想早早地开始使用新版的 JavaScript，所以就出现了 Babel 这样的 JavaScript 编译器。

Babel 的主要功能是将新版 JavaScript 编译成旧版 JavaScript，使得前端工程师既可以编写最新版的 JavaScript，而前端页面也可以完美兼容各大浏览器。

• 前端开发构建工具：Gulp。前两年还流行 Grunt，这两年流行 Gulp，所以直接学习并使用 Gulp吧。

Gulp 的最大一个用处是：打通开发过程中的工作流程。例如开发过程中，自动刷新浏览器、将 SCSS 编译成 CSS、将新版 JavaScript 编译成各大浏览器支持的旧版 JavaScript、项目开发完毕后的性能优化：压缩图片、CSS、JavaScript 等静态资源、合并雪碧图，把项目源码上传服务器等。

其实每个小操作都有工具能完成，而像 Gulp 这样的构建工具的作用是：将所有分散的小操作和小流程，通过 Gulp 平台上的插件，集合成一条龙服务，一次编写前端 Workflow，就可以免去很多分散精力的小操作，实现开发流程自动化。

上面提到的 CSS 处理器、JavaScript 编译器，都有 Gulp 插件，例如 gulp-autoprefixer、gulp-cssnano、gulp-image……

• JavaScript 前端框架：Vue.js、Angular.js、React、React Native……

JavaScript 前端框架的主要作用是，让前端工程师也能像后端工程师一样，以一个已经验证有效的开发范式来支撑项目，降低耦合度，提高项目可靠性和可维护性。

一点补充

由于前端刚从刀耕火种的时代，步入前端工程化的初级阶段，此时会出现大量的工具，例如 Grunt 还没开始用，Gulp 就来了，Gulp 还没领略其精粹，Webpack 又款款而至。迷恋工具，每每追新，必然不是前端工程师的修养。对于工具，我们强调使用场景。在什么情况下，需要使用什么工具，帮助提高效率，才应该是前端工程师所要关注的重点。

所谓高级前端工程师

所谓高级前端工程师的范畴：深入 JavaScript 底层、深入浏览器底层。

包括但不限于（由于本人远不及这个层次，下面的罗列可能不正确）：

• 玩转 SVG 绘图、Canvas 绘图
• 页面性能调优
• 玩转 Web Socket、Web Worker
• 自行开发 JavaScript 插件、工具、框架等
• 玩转 Chrome V8 引擎

共同进步

如有错误，欢迎在下方评论区指正。