想成为前端工程师，那么在大学期间应该如何规划？

为了能让大家第一眼阅读到最新内容，更新就写到上面了。

背景介绍：一个注重美学的WEB工程师，可能擅长php+js

这篇文章写于12年年初，到现在有三年多了，截至到现在赞同数549，被收藏 1290 次，不算多。前端近几年发展太快，原回答已经不是很符合意境了，所以我还是继续补充了。

目录

• 旧文（2014年前）


• 大学规划：培养习惯和拓宽视野（2015年11月1日）
  
• 前端的两个流派：
• 切图流（2015年10月31日）
• 技术流（2016年1月18日 - 1月22日）

旧文

前端是近几年发展起来的职业，很多新人对前端的认识比较模糊，因此开篇我有必要介绍一番，大众眼中的前端分为多个方面：前端偏美工是视觉设计，前端偏用户是用户体验，前端偏目标导向是交互设计，前端偏技术才是大家口中的前端工程师。

有的前端需要熟悉 PS，AI 等设计师作图工具，有的人需要熟悉HTML+CSS，比较难的就是JavaScript了。很多人上来就直接建议这个建议那个，在此之前不妨先了解一下大前端的一些细节。

我们经常在一些社区评论留言，留言的过程：

1. 打开留言页面

2. 输入留言内容

3. 点击提交按钮

4. 留言显示在留言列表上

我这里不解释这个过程的实现原理，我们先来简单的梳理前端工程师、视觉设计师、用户研究工程师、交互设计师的理职位区别或者说他们思考的角度：

前端工程师：

留言框代码怎么写？留言框的显示、一些JS动态效果的显示（可能涉及异步请求）。

视觉设计师：

什么样的留言框最漂亮？用什么色彩还是需要做一些纹理？

用户研究工程师：

用户怎么留言最舒服？很多人可能会和用户体验师混淆在一起，其实这两种人有着本质的区别，用户研究更侧重的是方法论，注重问卷调查访谈等等行为来了解用户的潜在行为习惯，而用户体验是一种行为，更侧重的是体验之后的实际感受。

交互设计师：

场景布局，留言过程中的反馈？输入错误后的提示，留言成功后的反馈等等。交互设计可以理解为人机对话，交互设计侧重和用户交流之后，引导用户有效操作，比如鼠标放在超链接上字体变颜色，有title提示，用户点击超链接，我们就可以称这次交互是成功的，因此交互设计的重点在于目标向导。

这些分工十分细微，如果留言本是一个项目的话，需要从几个不同的角度来分析留言框，一个大型的项目比如社交网站、门户网站、行业网站这些职位都必须明确分工才能把整个项目做好，但是实际上即使条理清晰在项目开展过程中还会出现诸多意想不到的问题。

现在你还认为你理解意义上的前端是前端吗？我以前以为前端是美工，但是后来我发现很多前端博客都在研究各种js框架，相比较而言我更喜欢视觉设计，但是我依旧也是一个前端，因为前端多姿多彩。

2015年11月1日续写....

我极其不赞同那些发一大篇大而全知识结构图，那种回答然并卵，对于普遍大学生来说，太技术的东西他们根本看不懂，在我看来大学生更重要的是培养习惯和拓宽视野。

题主提到的是大学时期的规划，那就说说大学可以干的一些事情。内容不局限在某个特定职位，你可能做不到全部，这些能力也不可能一蹴而就，但只要坚持做到几点，对以后职业生涯是受益匪浅。

先学会科学上网再说

之前培训新人给他们分享过很多文章链接他们都访问不了，沟通大受局限，因此我把科学上网摆在第一位，之后分享的链接有部分人可能无法访问，需自学科学上网，这里就不多说了。

学好英语

除了团队内部沟通用中文外，大量时间都是在和英文打交道。从事技术不会英语等同于文盲，尤其在技术进阶阶段英语的重要性毋庸置疑。三点：

1. 读懂英文技术文档（文档的重要性和时效性超过书籍）。

2. 可以用英文进行交流（社交网络 & IM等聊天工具）。

3. 读懂代码（除英文外，还需要懂编程语言）。

从书本里解脱出来

书非借而不读也，个人比较建议大学生多去图书馆看书，但不必沉溺，目前市面上的现有的大部分技术书籍质量不高，相比较技术书籍，我更愿意新人学会看文档，甚至到达一定水准，直接看代码就知道该怎么用一些技术了。

说一些日常发现的比较多的问题，我发现即使很多文档写的条理清晰、Demo齐全，新人读起来还是非常吃力。一方面某些技术的涵盖的范围很广，新人知识结构比较片面，很难理解一些概念；另一方面新人大多是看书和课后习题出来的，文档读的太少了，不能理解文档的意图。

分享两个我至今还一直在参考的文档网站：

入门级：

、

参考书：

Demo平台，你可以在这里运行你的Demo。

你要了解的两个窗口：浏览器和编辑器

1. 浏览器

Safari Webkit

Chrome Blink（Webkit分支）

Opera Webkit（Opera已死，早先的Presto就不拿来说了）

Firefox Gecko

IE Trident 注 微软已经放弃 IE 11 以下版本更新了

Edge EdgeHTML （Trident 分支）

2. 编辑器

Sublime Text 首推

vim/emacs 太极端了

IDE 太笨重了

浏览器 & 编辑器 会是你以后最重要的两个伙伴了，学会和她们相处，对工作效率的提升不是一丁半点。怎么相处？那是你的事儿了。

加入校内Web团队，找兼职工作或者去有意的公司实习。

不同团队，不同项目所用到的技术栈都不一样，你可以从校园内部开始，逐渐把目光放的更长远，你可以关注一些意向公司的动态，了解他们的需求，可以关注他们的微博，你可以用寒暑假的时间去不同公司感受前端在不同公司的不同之处，对于拓宽视野非常有帮助。

关注开源项目、技术社区和技术博客。

日常根本没有太多时间关注太多东西，以下只推荐几个我平时经常关注的平台：

Github可以是搜索引擎、可以是社交平台、可以是项目托管平台。你可以近距离的看到世界级的精英都怎么写代码的。我平时大量时间都泡在Github上看代码了，我的编程水平也不高，但是我知道怎么去欣赏一个项目，这是一种享受，跟看了一本小说一样。

多说几句：我很少看技术书籍，我学编程不是从语法开始的，我喜欢直接看整体项目，然后自我感悟。再带着问题去Google解决自己的疑问。

除了Github外，Stack Overflow也帮我解决了诸多平时项目中遇到的坑。

不得不说CSS Tricks上有很多高质量的文章，但对我自己来说，我更多的是来凑个热闹，看看文章，看看评论，学习下英文不亦乐乎。

除了看每周精选外，我很少在SegmentFault上搜东西。但是作为从Typecho关注过来的人，还是特别希望SegmentFault能有好发展。

国内技术博客第一人，无他。避免歧义还是说明下，其实他的博客并非都是技术文，而且很多关于技术的文章更多的科普和人文，但是一个人能长期用心坚持十几年写博客非常不易。

同样的比如

陈浩的文章相对就更技术型，内容生涩难懂，对于小白人群就望尘莫及了。

参与开源项目的维护与开发

到达这个层次的大学生较少，这个阶段你会学会git的精髓，这方面就不多说了。

--------------------------------------------------------------------

2015年10月31日续写......

这个话题实在太大，我尝试分几点把这个大话题讲的稍微明白一些。

大学的职业规划，最终也是为了进入职场，从业务角度前端根据人的特点可以分为两个流派：切图流、技术流。

一般来说懂平面设计的人做前端切图会更细腻一些，懂设计的前端也只在切图时候会体现出一些优势，设计公司会更偏好切图流派，对于重视技术流的前端公司，懂不懂设计对他们来说不是重点，甚至切图占有的比重都很小。技术流派甚至不会切图，他们的大把时间都消耗在专研技术里了，什么技术，这些之后再说。

一、切图流

切图需要熟悉PS和AI的切图技能，简单说就是把设计稿的web元素导出为jpg/png/svg等等，结合这些元素把设计稿转化成web页面。切图是个非常需要耐心的工作，需要把设计稿精确的转化成页面，需要解决浏览器的各种兼容性问题、响应问题。如果你只是在国内某些大包大揽的建站公司做切图，那是灾难，而且会养成很多陋习。如果有幸和国外的优秀的设计团队合作，会是一种享受。但是设计师们对页面细节要求非常苛刻，如果你只懂得HTML+CSS技能根本不足以支撑你完成一份高质量的切图。

国内大公司前端都比较技术流，没有那么多精致的设计稿让你切，国内建站公司的切图又太垃圾，所以如果做切图去一些面向国外的小团队体验一下吧。

切图的基础工作：PSD2HTML和AI2HTML，PSD2CMS，PSD2BACKEND。

PSD2HTML和AI2HTML：主要负责把设计稿精确的转化成html页面。

PSD2CMS：直接转化为cms的主题，需要比较懂cms系统，比如WordPress，Drupal之类。

PSD2BACKEND：直接套到某个后端语言的框架里。这个难度级别比较高。

在一个专业的团队里，切图主要负责的工作就是PSD2HTML和AI2HTML，这一类人一般水平比较局限，需要掌握基本的html+css技能，如果懂js就更好了。

相比较 PSD2CMS & PSD2BACKEND 一般都是偏fullstack的比较多，多见于全职soho。

切图的另一项重点：动画。

素材由设计师提供，一般这类设计师都比较时尚，有些设计团队是从flash转来的，对页面效果特别有追求，跟这类设计师合作是个技术活。比如Google的动态Logo（并非指 gif 动画），可以堪称动画的代表作（自成体系的动画）。

页面动画效果一般来说

CSS3中比较简单的transition和transform，难的有keyiframes的animation，最难的是CSS和JS结合（可以是jquery插件，也可以是angular这类插件）。涉及面太广暂不深入讨论了，感兴趣的自行github，给大家发一个动画库，是基础也是精髓。

Animate动画集合看个够

切图工作者的进阶技能

HTML重构和页面模块化。

在此基础上了解怎么使用Sass/Stylus/Less等CSS预编译器。

切图能好这点技能已经相当牛逼了。

--------------------------------------------------------------------

2016年1月18日续写，1月22日修改

二、技术流

包管理器：npm、bower、component、spm

前端构建工具：grunt、gulp

模块加载器：requirejs、webpack、jspm（systemjs）

代码规范：ES5/ES6、Commonjs、AMD

语法糖：Coffeescript、Typescript、Dart...

CSS预编译器：Sass、Stylus、Less、PostCSS

DOM操作：JQuery、Zepto...

浏览器引擎：Webkit、Gecko、Trident...

前端框架：Backbone、Ember、Angular、Flux（React）、Vuejs

后端框架：Express、Meteor

模版引擎：handlebars、swig、nunjucks、ejs、jade...

WEBAPP: SPA、Isomorphic

协议：http、websocket...

各技术栈的发展历程：

包管理器：npm、bower、component、spm（国产）

npm 刚出来的时候多用于 node 模块管理，spm 和 bower 是前端模块管理器，component 是TJ大神的作品，已淡出视线，不讨论了。

如今

bower宣告终止开发，前端模块管理全面移向npm。

spm 从 3.9 开始将不再管理组件的生命周期, 即不再有 spmjs.io. 所以相应的逻辑全部去除. 请使用 npm 来管理组件.

npm从此统一了前后端js模块管理

各种语言对比

python有pip

ruby有gem

php有composer

javascript有npm、bower、component、spm但是在2016后javascript只有npm了，这是时代的进步。包管理器的出现，javascript才真正的开始像一门编程语言了

问题：

包管理器是啥？

javascript为什么有这么多包管理器？

前端构建工具：grunt和gulp

CLI：requirejs、webpack、jspm

目前前端的发展趋势：

3年前的项目用 requirejs

2年前的项目用 grunt

1年前的项目用 gulp

现在的项目用 npm + webpack

requirejs 是前端技术发展的分水岭，如今也已经退出历史舞台了

grunt 一堆繁杂的 config，令人望而生叹，官方已经停止维护了

gulp 没那么火了，不过作为流式构建工具，有它独到的好处

jspm 从关注到现在一直在掉粉，star不升反降。原因就等那些有心人自己去探讨吧。

推荐阅读

问题：

前端构建是啥？

为什么需要前端构建工具？

代码规范：ES5/ES6、Commonjs、AMD

语法糖：Coffeescript、Typescript、Dart...

和其他语言不一样 javascript 受限于浏览器，官方标准滞后不前，导致出现各种语法标准，甚至出现了很多语法糖.......在 ES6 推出之前 Coffeescript 被很多人推崇，现在 ES6 被炒的火热。

ECMAScript 的历史感兴趣可以拜读这里

Commonjs 作为官方鸡肋的 ES5 标准无法满足 nodejs 需求，提出的一种针对服务端的标准，在browserify 出来之后，commonjs 标准在浏览器端也普及起来。

AMD 是 requirejs 提出来的最初针对浏览器端的一种规范，如今已经不再提倡了。

Coffeescript、Typescript、Dart 这类语法糖更像是给后端程序员用的语法标准

Coffeescript -> Python/Ruby

Typescript -> C#

Dart -> Java

ES5/ES6 -> Javascript

如今ES6/7逐渐完善，Commonjs => ES6 标准正在变得主流

学习参考的网站：

问题：

CoffeeScript 当年为什么流行？

为什么javascript会出现这么多标准和语法糖？

CSS预编译器：Less、Sass、Stylus、PostCSS

SASS 2007年诞生，由ruby编写，后来受Less影响，退出scss规范。

LESS 2009年诞生，由更接近CSS语法，因Bootstrap支持，被大家熟知。

Stylus 2010年诞生，来自 node 社区，可以很好的和JavaScript项目紧密联系起来。

PostCSS 2015年 由 Twitter 推出的一款css预处理工具。

PostCSS 的个人见解：和上面三种不一样之处，它可以很灵活的操作和调度css，尤其在 isomorphic app 中，当然还有各种好玩之处，有待大家发觉。

推荐一篇写的还不错的文章：

最后说一点 Less、Sass、Stylus、PostCSS 不是四选一，他们之间都可以共存于一个项目中。

问题：

为什么使用预编译器？好处在哪里？

如何更好的使用预编译器？

浏览器引擎

Safari Webkit

Chrome Blink（Webkit分支）

Opera Webkit（Opera已死，早先的Presto就不拿来说了）

Firefox Gecko

IE Trident 注微软已经放弃 IE 11 以下版本更新了

Edge EdgeHTML

IE 9 尤其 IE 11版本之后很多css/js标准逐渐统一，大批量js插件停止维护更新了。可预想不久的将来，在浏览器标准越来越统一的未来，很多这几年推崇的技术都将没落。

DOM操作：JQuery、Zepto

Zepto 不需要考虑IE兼容性，代码精炼很多

JQuery 2.x 已经不支持 IE8 及以下 IE 浏览器

很多 JQuery 插件已经不再更新，过去一年大量 Github 搜索之后的总结

JQuery 在处理兼容性问题上下了很大功夫，但在浏览器标准逐渐统一之后，很多插件都没有存在的必要了。尤其前端业务越来越复杂化的时代，JQuery 的适用范围逐渐在减少。

在前端框架盛行的这几年，JQuery 还能如此坚挺，但 JQuery 的适用范围在缩小，在IE8还没退出历史舞台前，它还会有很大的作用。

前端框架：Backbone、Ember、Angular、Flux（React）、Vuejs

后端框架：Express、Meteor

框架概念被大家炒的火热，但框架并不是万能的，任何脱离实际项目的技术讨论都是耍流氓，任何项目都非一门技术就可以搞定，甚至项目的发展取决于多方面因素，我就不多说了。

模版引擎：handlebars、swig、nunjucks、ejs、jade...

在前端提倡 ui 组件化之际，模版引擎进化为了ui组件的服务端渲染。React 之类的 UI 组件变得流行。以前的这些模版引擎....

一些说明

感慨万千，前端近几年的爆发式增长，很多技术的迭代太快了，如果你是技术狂人，这是个非常值得折腾的年代，如果你不喜欢折腾，就静静的关注前端的发展吧，JavaScript 作为前端脚本语言正变得越来越有意思了，各方面的完善，更像一门编程语言了，尤其在 webapp 里扮演着越来越重要的角色。但不否认很多公司对 JavaScript 的重视程度并不一样，应用场景也不一样，甚至在传统的大项目里，有些技术虽然不火了，但是并不代表技术就不需要了，尤其历史遗留的项目还都使用着以上各种技术，大家不要盲目追随，按需学习即可。

先转变思路，像在职人员一样思考。

假如你是一个实习生或新人，起步高点，真正出去的时候轻松点。

个人看法，仅供参考。