为了账号安全,请及时绑定邮箱和手机立即绑定

前端入门应该如何规划自己的学习路径?

明确你的意愿

其实不管是前端还是后端,首先要清楚,自己是想从事业务型的技术工作,还是 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、WebStorage(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 引擎
共同进步
学习这事,一不要怕,二不要慌。我自己有过类似体会,遇到一个小问题,可能就是我不懂,或是没有想透。但有时我会发慌,也说不上来是什么感觉,就是有点慌神。想赶紧找个明白人问个清楚。在这种情况下,我会有二种解决办法,一是找几个前端相关的社区如(慕课网),把里面的管理员全都加好友,这样至少能有几个通过我的,然后我会问他们,总会有人愿意回答我的;另一种就是,确实没人理我,好吧,但这种办法十有八九并不能实际解决我的问题,我这样做只是为了让自己定定神。然后,再继续自己去研究它,它console.log,不断的把各种运行时状态打印出来,看看它到底是什么。我想说的是,在学习的路上,要攻克很多技术点,难关。prototype,call,oo,等等,都是难点,这些难点在多个人去的不断的聊,不断的问,是解决不了的。就像在学校的自习室一样,都是每个人自己学自己的。学习这事,人多嘴杂反而乱。

点击查看更多内容
138人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消