初稿文章。

平时觉得入门前端其实很简单,但是真正到码字教给别人经验的时候似乎压力山大,因为有一点不当就会把读者带跑偏。本人思索再三,决定根据自己的经验、做过的项目、阅读过的文章,遇到过的需求,综合考虑,写下这篇前端小白入门建议。

正文开始前,再三提点读者们,无论是谁写的、写哪种语言的入门教程或建议,都会带有个人的主观因素在里面,都带有这样那样的局限性。世上没有最好最全最完美的入门教程、建议和路线规划,只有是否合适自己的。“学而不思则罔,思而不学则殆”,别人的经验你拿过来还是只能参考和借鉴的,结合自身的因素,去选择学习和深入。

比如,你更喜欢做 H5 动画,那么注意力集中在 CSS3、 Canvas 和 SVG 及各自相关的第三方库上;如果你更喜欢写业务逻辑,那么集中注意力在 js 上;如果你更喜欢造轮子,则可以深入到 js 底层及工程体系上去。看自己的选择和思考。

前端概览

首先看看 2012 年的前端知识体系图谱,图源自网络。
2012 年前端知识体系图谱

再来看看 2017~2018 的前端技术知识体系图谱,图源自《现代前端技术解析》。
2012 年前端知识体系图谱

看到密密麻麻的主干和分支技能,相信大家都被吓傻了,对,也包括前端从业 2 年多的我。但换个角度想想,世间万物学科不都是这样吗?我们小学开始学数学、英语、科学,有必要去想数学建模、概率论、离散数学、商务英语、高分子生化这些东西吗?知识是学不完的,人的一生,就是一连串学习的轨迹。

给这么庞大的图给大家看,不是为了给大家压力,不要去想着,“哎呀,还有这么多东西要学啊?我哪里有时间,我平时不能玩了!”。学习是一种成长,不能有「终点式」意识,不能想着说“等到我全部学完就好了”,一旦这样想,那就注定了学习前端这条路是永久痛苦的。相反地,我想借助这些知识图谱告诉大家,我们可以学习到这些东西,可以掌握这些东西,这些知识最终能为我们所用。我们能够深入其中一到两个点,成为这方面的专家。

「知识的价值从来不在于记背,而在于运用。」

Step 1:起步式

初始,我认为我们应该对前端有个清楚的认识。如果连自己想要获取和掌握的东西都没有一个定性的认识,那么我们前进起来就如同失去航灯的船只。

要想清楚前端能够做什么,就到前端产品里去体验一番吧!打开浏览器,点开你收藏夹里的网页,所有你能看到的都是前端技术领域的。包括微信,还有微信小程序、微信小游戏。另外,市面上部分手机 App 都是 Hybrid App,也就是内嵌网页的 App。现在,下载一个 「Teamviewer」 桌面用用看,它是一个团队协作的效率软件,采用的是 Electron 搭建的,是跨桌面应用,用的也是前端技术。对了,再下载两款我们后面要用到前端代码编辑器 「Atom」 和 「Visual Studio Code」,也是使用 Electron 搭建的。

对了,之前有玩过微信的打飞机小游戏吧,那个也是前端用 Canvas 做的。

所以,我们应该从哪里开始我们的前端学习之旅?

  1. 体验各种前端产品
  2. 观察内容呈现的方式

最后,前端有三大基本功:HTML、CSS、JavaScript,现在所有的技术框架,无论是样式的还是脚本的,万变不离其宗,都是基于这三大基础的。

Step 2:学习基本功–HTML

发展到现在,W3C 组织推出了 HTML5 标准,新增了很多元素标签和对应的 JavaScript API。首先学习基本的 HTML,然后接着学习 HTML5,看看简化了哪些东西,废弃了哪些标签,新增了哪些特性?

粗略地给大家整理一部分必须掌握的 H5。

一、简化的文档类型和字符集

  1. <!DOCTYPE HTML>
  2. <meta charset="UTF-8">

二、新增的语义化标签

  1. <header></header>
  2. <section></section>
  3. <article></article>
  4. <footer></footer>
  5. <nav></nav>
  6. <aside></aside>
  7. <mark></mark>
  8. <time></time>
  9. <progress></progress>

三、全新的表单设计

  1. 新的 <input> 类型:email/url/number/range/Date pickers/search/color
  2. 新的 <form> 属性:autocomplete/novalidate
  3. 新的 <input> 属性:autocomplete/autofocus/multiple/placeholder/required/pattern
  4. 新增原生表单校验功能

四、新增强大的绘图功能

  1. 新增画布标签 <canvas></canvas>,结合 js 可以实现动画和游戏;
  2. 新增矢量图形标签 <svg></svg>

五、新增多媒体功能

  1. 新增视频标签 <video></video>
  2. 新增音频标签 <audio></audio>

六、加强缓存功能

  1. 新增 window.sessionStorage 会话缓存 API
  2. 新增 window.localStorage 本地存储 API
  3. 支持 WebSQL 等轻量级数据库

七、新增支持获取地理位置信息
新增支持 Geolocation API,可以通过浏览器获取用户的地理位置,不需要再借助第三方的库。

八、支持多线程

  1. 新增 Web Worker 对象,可以在后台运行 js 脚本,也就是支持多线程,要明确其使用场景
  2. 新增 Service Worker 对象,可以实现 Progress Web Application

Step 3:学习基本功–CSS

CSS 的学习同样建议先学习基本的 CSS2,因为现在还有一些公司抱残守缺,还在兼容 IE 浏览器,老浏览器是不支持 CSS3 的。前几天开源中国发布的文章中统计到,IE 居然还占领着 3.08% 的浏览器市场,非常地不可思议!吐槽归吐槽,如果公司前端部门还是要兼容 IE 的话,那我们也就只能迎难而上了。

《Chrome 浏览器以 58.09% 的市场占有率稳居世界第一》
原文链接:https://www.oschina.net/news/97018/chrome-has-the-top-share-58-09

后面紧接着就去学习 CSS3,看看到底新增加了什么功能设置。这里粗略地给大家整理一部分必须掌握的 CSS3 属性:

  • CSS3 选择器
  • CSS3 盒模型
  • CSS3 边框
  • CSS3 圆角
  • CSS3 背景
  • CSS3 渐变
  • CSS3 文本效果
  • CSS3 字体
  • CSS3 过渡
  • CSS3 动画

js 从基础到深入

一、ECMAScript 5
首先学习 ECMAScript 5,包括如下内容:

  1. JavaScript 与 ECMAScript 的发展史、区别与联系;
  2. 基础语法及调试方法;
  3. 变量和常量,以及作用域;
  4. 原始数据类型与引用数据类型,以及数据类型之间的转换;
  5. 运算符和表达式;
  6. 函数的定义与调用;
  7. 递归函数与全局函数;
  8. 流程控制语句;
  9. 循环控制语句;
  10. 数组的常用操作和方法;
  11. 字符串的常用操作和方法;
  12. 正则表达式;
  13. Math 对象;
  14. Date 对象;
  15. Number 对象;
  16. Boolean 对象;
  17. 错误处理与 Error 对象;
  18. 匿名函数;
  19. 闭包与作用域链;
  20. 原型与继承;

二、DOM
其次学习 DOM,如何用 js 访问、控制和修改标签或元素节点的属性和内容是必修的内容。

  1. 常用 DOM 属性;
  2. 常用 DOM 方法;
  3. 元素查找 api;
  4. 操作元素的内容;
  5. 操作元素的属性和方法;
  6. 操作元素样式;
  7. 获取表单对象;
  8. 操作表单对象及表单元素的属性;
  9. 操作 table 元素对象的属性;
  10. 操作 image 元素对象的属性;
  11. 核心 DOM 操作;

三、BOM
然后学习 BOM,要来学习一下跟浏览器有关的知识,如何操作浏览器相关的属性和调用相关的方法,也是影响我们网页表现的一大方面:

  1. window 对象
  2. screen 对象
  3. history 对象
  4. location 对象
  5. navigator 对象
  6. event 对象

四、jQuery
学习完以上的三大部分知识,就可以学习 jQuery 了,它能够让我们日常的 js 操作更加方便快捷。

五、第三方库和框架
现在比较流行的 js 库有:Vue、React 和 Angular,可谓三驾马车。

建议直接上手 Vue 2.x 版本,国人尤雨溪开发,官方带中文开发文档,中文社区日益壮大,github 下载量直追 React。2.x 版本采用虚拟 DOM,渲染效率大大提升,Vue 的全家桶也越来越成熟,上手和进阶门槛非常低,开发速度极快。

React 的学习曲线稍微比 Vue 陡峭,但是社区非常繁荣,毕竟是大厂 Facebook 的项目,第三方扩展库非常多,绝对能够满足我们日常的学习和开发了,遗憾的是中文资料稍微比 Vue 欠缺,但是学习人群庞大,不懂就问。另外 Airbnb 最近宣布弃用 React,改用原生框架,也许这意味着什么。

Angular 从 2.x 开始就定位给大公司去使用了,而且要搭配 TypeScript 去使用,版本更新越来越快,而且是大版本号,不向后兼容的,不建议考虑。

边学习库,边做一点小项目,上掘金社区,有很多童鞋发布了一些小项目的文章和仓库,可以挑选一些具有代表性的去自己实现一番,增加自己的项目经验。

六、微信小程序
微信小程序的构建有点像 Vue+Webpack 的组合,原生开发有点痛苦,好在现在又微信官方发布的 wepy 框架和美团官方发布的 mpVue 框架,建议直接上手框架,加速开发。

七、ES6 / ES7
直接阅读阮一峰老师的《ECMAScript 6 入门》,有线上版本,是开源免费的。跟着教程敲一遍代码,基本上就会了。

学会之后,用 Webpack+Babel 搭建项目的工程基础,用 ES6/7 快速书写 js 业务逻辑。

八、Node.js
后续可以学习一下 Node.js,自己尝试去开发一个 Node.js 服务器,做点小项目。

获取前端图谱原图