前端小白的自学养成记

前言

随着今年9月 微信小程序 的推出,前端开发工程师一跃成为市场上供不应求的香饽饽。为什么很多公司开到 20K+ 的月薪都招不到一个优秀的前端工程师?这个问题不在本文的讨论范围内,想知道的同学可以转到 100offer 这篇文章 为什么整个互联网行业都缺前端工程师?

很多同学,包括以前做机械的、UI的、Java的、或者对于IT完全零基础的同学都想自学前端。下图是我整理的一份Web前端的技能树,很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实,前端是一门涵盖面很广的学科。但是想学好前端找到一份好工作的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端!
alt

什么是前端

前端是对于网站或者网络应用来说的,前端是相对 后端 来说的。前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。后端对于网站来说,通常是指网站的后台部分包括网站的业务逻辑层、数据持久层、负载均衡等。现在还出来个新名词叫全栈,就是前后端的大多数技能都掌握,不过真能达到那是牛人值得仰望。

因此前端技术一般分为 前端设计前端开发 ,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的 HTMLCSS 以及 JavaScript/ajax ,现在最新的高级版本HTML5、CSS3,以及 SVG 等。

正文

1、明确你的意愿

其实不管是前端还是 后端 ,首先要清楚,自己是想从事 业务 型的技术工作,还是 Research 型的技术工作。
前者可以理解为:互联网公司的程序员。业务型的前端工程师,最大的一个特点是:从客户需求出发,去真真正正地做出一个产品来,交付客户,让客户满意,并对客户产生实际的价值,这也是大部分互联网技术从业人员的工作内容。业务型的技术人员使用的技术往往不是最新的前沿技术,而是经过验证的效益更高的技术,用最小化的成本来服务客户。这需要不停地实践与实战,以便更快、更高效地实现客户需求的满足。
后者可以理解为:行业的科学家。这种角色时常走在行业的前面,去带领互联网公司,甚至是技术行业,探索更先进的技术、挖掘更有价值的数据、构建服务大众的基础设施平台等……
目前,绝大部分互联网技术人员都从事着业务型的技术工作,少部分极其优秀的技术人员可以从事 Research 型的技术工作。文章一开始就强调要了解清楚自己想从事的是哪个类型的技术工作,目的是树立一个终极目标。而要从事 Research 型的技术工作,首先必定是需要多年的业务型技术工作的经验积累的。

2、补充一个题外话

很多没有接触过编程的人都以为编程很难,要具备很高的数学能力,是因为他们往往都把“编程”这个活动理解为从事 Research 型的技术工作了。这是他们的一大误区。
其实大部分的编程活动,都是对“业务逻辑”的理解,然后用代码拼凑出产品和服务,这里面涉及到多深的数学知识?我看不多……
编程的总体思路就像是写书。写书前,你已经识字了,这是你的基础,你还会运用积累下来的一些表达技巧,让你的书更加吸引人,实现更高的销量。写书前,你已经知道了很多前人规划好的、约定俗成的东西了,而你要做的是,利用这些约定俗成的东西,去写一本自己的书。这本书可以参考前人的书,也可以参考已有的论文。
编程,往往是一个创造过程,而不是一个发明过程。

3、前端自学路径指南

前端作为一个新兴工种和职业,它一直未能有幸像 Java、C 等后端语言一样,进入高校,成为一门课程。这就导致几乎所有的前端工程师,要么是从后端工程师转型而来,要么从设计师转行而来,都靠自学成才。而我也发现,校内极少人从事前端开发,大部分人都走后端和客户端路线。
而前端从诞生至今,一直未能跳脱 HTML、CSS、JavaScript 这三门“语言”。自然地,入门指南当然围绕三者讲起:

HTML、HTML5

记住至少 90% 的 HTML 标签及其语义,重点是headerfooterarticlemainsectionnavaside 这种语义特别明显的用于布局的标签。

CSS、CSS3

记住至少 90% 的 CSS 属性与写法,重点是盒模型(marginpaddingborderbox-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 中WebSQLWeb Storage(Local Storage 和 Session Storage)、应用缓存(Application Cache)、Cookie 是怎么回事,能实现什么功能。
以上算是接触并使用 JavaScript,还没进入大量实战阶段。

jQuery 与 Zepto.js

我的主张是,JavaScript 一开始并不需要学得太深。对于业务型的前端工程师,完成上面提到的 JavaScript 部分,基本就够用了。
而基本上,一定要做的一件事是:学习 jQueryZepto.js(人称移动端的 jQuery)。两者的实现极其相像,可以只学 jQuery,Zepto 基本就无师自通了。
jQuery 和 Zepto.js 之于 JavaScript,就像 Bootstrap 之于 HTML 和 CSS。都是为了简化代码、更高效地完成业务而开发的 JavaScript 类库。它们封装了很多原生 JavaScript 的语法和方法,使之编写代码时更方便,同时保证对旧版浏览器的兼容性。
对于两者,建议:了解如何使用 jQuery 操作 DOM 常用的数据处理方法(数组项如何增删查改、对象如何访问及选取、方法如何调用、JSON 数据如何处理及使用)。

4、所谓中级前端工程师

所谓中级前端工程师的范畴:学会使用前端工具。
工具包括但不限于:

  • 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-autoprefixergulp-cssnanogulp-image……

JavaScript 前端框架

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

5、一点补充

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

6、所谓高级前端工程师

所谓高级前端工程师的范畴:深入 JavaScript 底层、深入浏览器底层。
包括但不限于(由于本人远不及这个层次,下面的罗列可能不正确):

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

共同进步

如有错误,欢迎在下方留言区指正。

Jason Xu wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!