计算机专业的学生如何系统学习前端技术?

一个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章，来给大家一个参考。

首先，请大家牢记以下几点：

1. 前端不简单！前端不简单！前端不简单！
2. 前端和美工不一样！不是只会 HTML、CSS、JavaScript 就行的。
3. 程序和其他的行业不一样，经验是十分重要的，不管看多少书，都逃不过要经常的练习。
4. 在学会使用 JavaScript 实现相同操作之前，不要使用 jQuery。
5. JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样，并没有什么关系！

前期准备工作

1. 下载好 Sublime Text 3，并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包，名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候，使用 Sublime Text 编辑。
2. 下载 Chrome 浏览器，目前（2017 年 3 月 9 日）最新版本为 56，请尽量安装最新版本，并设置为默认浏览器。
3. 下载 Visual Studio Code，之后单独写 JavaScript 的时候，使用 VS Code 编辑。
4. 下载并在本地安装 Node.js，目前（2017 年 3 月 9 日）最新版本为 7.7.1，请尽量安装最新版本。
5. 使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。
6. 注册一个 Github 账号。

初学阶段

学习时间：1 个月

初学阶段主要是学习 HTML、CSS 和 JavaScript，掌握三种语言的基础语法，并且掌握基本的布局方式、基本的 DOM 操作和算法。

HTML 和 CSS

推荐跟着 iMooc 的《HTML + CSS 基础课程》学习，里面的每一小节都是指引式的教学，跟着指导学习 HTML 和 CSS 的基础语法。

链接：http://www.imooc.com/learn/9

学习完上面《HTML + CSS 基础课程》的所有内容之后，自行完成一个百度搜索的首页，要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。

【3.12 更新】

课程中没有提到的该学习的还有 flex 布局。

JavaScript

学习 JavaScript 可以上廖雪峰的网站上学习：

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

跟着目录从上往下学习，一直到 Promise。

学习的过程中可以结合练习题学习，这里整理了一些：

https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md

正确把代码写的简单，短小。最好能一行实现。

当你学完 HTML、CSS 和 JavaScript 的基础之后，完成这么一个小练习：

实现一个简单的 TodoList

不懂啥是 TodoList 的自行 Google

限制

1. 界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计
2. 不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）
3. 增加、删除、修改的操作执行后，页面不能刷新

基本功能

1. 增删改查
   增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。
2. 可以储存 “内容” 与 “是否已完成” 的状态
3. 使用 localStorage 储存数据
4. 界面尽可能做的好看

加分项

1. 可以只显示“未完成”或“已完成”的条目
   你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法
2. 给每一条 todo 添加 “完成日期”
3. 在第二点的基础上，已过期的条目有不同的样式
4. 其它更牛逼的功能

进阶阶段

学习时间：1 个月

学习完上面的课程，你就已经是一个合格的美工了，能根据设计师的设计稿实现出页面，但是还不是一个前端工程师，或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。

Markdown

首先学会使用 Markdown 进行写作，Markdown 是什么，怎么样个语法；

git 版本控制

其次要学会使用 git 进行版本控制，还是刚刚的廖雪峰—— git 教程：

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

并且把上面做的两个项目，通过 git push 到 Github 上开源，README.md 使用 Markdwon 编写。

HTTP, Ajax 和异步

学习 Ajax 的基本实现，在这个阶段你会接触到 JavaScript 的异步编程，你得自行了解什么是异步，并且会开始基础 HTTP 协议，请自行了解 HTTP 状态码，请求头，响应头等基础知识，并了解 TCP/IP，HTTP，HTTPS 协议的概念和关系。接着了解 JavaScript 的同源策略，为什么需要同源策略，以及如何跨域。

高级阶段

学习时间：6 个月以上

【3.12 更新】

这个阶段你会开始多终端前端的开发，了解响应式布局，接触前端工程化和前端框架，并开始深入学习 JavaScript 的深入内容，包括 ES6、ES7 等。

响应式布局

了解响应式布局的应用范围、基本原理。学习 em, px, rem, vh, vw 等单位的使用。

ECMAScript 6

学习 ECMAScript 6，了解 ECMAScript 和 JavaScript 的关系，具体文章可以看阮一峰的 《ECMAScript 6 入门》，另外可以参考我写的《ECMAScript6 学习笔记》。

NPM

自行找教程学习 npm 的使用，接触前端工程化，了解 Gulp, Webpack 等工具的用处，并在本地自己搭建一个工程化环境。

前端框架

自行找教程学习 Vue.js 或 React 或 Angular 等前端框架，并尝试使用这些框架搭建一个单页面应用。以下以 Vue.js 举例：

• 学习 Vue.js 基础语法，一定要看官方的文档来学习：https://cn.vuejs.org。
• 学习使用 Vue-cli 在本地一键搭建 Vue.js 项目。
• 本地开发一个 Todolist 的 Vue.js 版本，同样使用 localstorage 进行存储。
• 学习使用 Github pages 部署开发好的 Todolist，可以让别人一起使用。
• 了解 Vue.js 2.0 的内部原理和外部思想：
• Virtual DOM
• 数据监听
• render 函数
• 单向数据流
• Vue.js 的 Lifecycle
• 服务端渲染的原理
• Vuex 和 Vue-Router
• ……

Canvas 相关

了解 Canvas API 的使用，懂得使用 Canvas 制作动画，以此来制作一些更炫酷的前端效果，如图片背景的高斯模糊等。

深入阶段

学习时间：无限

这个阶段是作为一个前端继续精进自己的一个阶段，你已经可以胜任小型项目了，但是还有一些细节需要你一直不断的学习。

前端储存

前端储存知识点：

• 储存技术有哪些？
• Cookie, SessionStorage, LocalStorage 有什么区别？
• ……

History API

什么是 History API，为什么要增加这个功能？

性能优化

学习有关前端性能优化的相关知识等：

• 如何缩短白屏时间
• 如何提升 CSS3 动画的性能
• ……

安全

学习有关前端的安全相关知识等：

• 通信安全
• 如何保障 Ajax 通信安全
• XSS 攻击
• 什么是 XSS 攻击
• 如何防范 XSS 攻击
• CSRF 攻击
• 什么是 CSRF 攻击
• 如何防范 CSRF 攻击
• CSRF 攻击和 XSS 攻击的区别是什么
• ……

兼容性

有关 IE 浏览器以及老版本浏览器的兼容性问题的学习和解决，包括：

• HTML 标签的兼容性
• CSS 样式的兼容性
• JavaScript 的 API 的兼容性
• 优雅降级与渐进增强

学习后端

等到前端学习的差不多了，可以通过 Node.js 来接触后端的开发，这里不再详述。