458e0336c870e8359d4eb4329f6a49a0
009 | 快速入门 Web 前端开发的正确姿势

前面我已经分享了如何快速入门Android 开发iOS 开发,接着,我们就来聊聊 Web 前端吧。

入门标准

入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际项目开发,肯定还要掌握其他一些主流的框架体系。

几年前, jQuery + Bootstrap 可以说是一统江湖,是前端领域的绝对霸主。而这几年,随着 AngularReactVue 等框架的兴起,变成了百家争鸣的局面。这几年,Web 前端的技术发展真是太快了,相应地,技术栈也就变得非常多,除了最基本的 HTML/CSS/JavaScript,以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系,还有 CSS 预处理器 Sass/Less/Stylus,还有 TypeScript,还有 grunt/webpack/gulp 等各种打包构建工具,还有其他一大堆技术栈。

这么多技术栈,我们不可能全都掌握,就算是资深的前端工程师,也只是精通其中一部分,比如,有些精通 Angular,有些掌握 React,有些则熟悉 Vue,很少有人对三种框架生态体系都非常了解。因此,我们入门也没必要每种框架都学习,只要挑选一种就够了。而且,作为全栈,我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew,其背后的核心设计思想都是组件化的设计,因此只要掌握一种框架,我们也就能学习到前端技术的核心思想了。

那么,我们应该学哪种框架体系呢?我的建议是从 Vue 开始,因为 Vue 的学习成本是最低的,入门简单,而且这两年 Vue 可以说是出现了爆发式的增长,已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法,而且文档还大多都是英文。Vue 因为是国人开发和维护的,自然对国内的开发者更友好。Angular 则是个大而全的框架,显得太重,学习成本自然最高。至于 jQuery + Bootstrap 这套,已经过时了,建议没必要去学习了,毕竟我们的时间很宝贵,还有一大堆更有价值的东西等着我们去学。

因此,我们要入门 Web 前端开发的话,除了要学习 HTML/CSS/JavaScript 三大基础技术栈,还要了解 Vue 体系。而 Vue 体系,除了 Vue 框架本身,还包括其他技术栈,这个后面再说。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基础,所以必须要掌握。HTML 主要就是 HTML5,相比之前的版本,新增了很多新特性。CSS 则主要是 CSS3 了,相比以前的版本,主要就是作了模块化的拆分。JavaScript 其实分为三部分:ECMAScriptDOMBOM。ECMAScript 简称 ES,是 JavaScript 的核心,目前最新版本已经是 ES2017,是 ES6 的第三个小版本。DOM 是文档对象模型,其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型,用于访问和操作浏览器的一些特性。

HTML/CSS/JavaScript 的学习资源比较多,我推荐几个。首先是 w3school 的系列教程:

  • HTML:该教程也包括了 HTML5 新增的内容,但讲得没下面专门讲解 HTML5 的细,所以该教程我建议只看 HTML 基础教程和表单部分即可
  • HTML5:该教程讲解了 HTML5 的新特性
  • CSS:该教程并不包括 CSS3 新增的特性,所以还需要学习下面的 CSS3 的教程
  • CSS3:该教程内容比较少,只包含 CSS3 新增的特性
  • JavaScript:该教程只是讲解了非常基础的语法

不过,我更推荐菜鸟的教程,内容虽然也是来自 w3school,但部分内容比 w3school 的更详细,以下是教程地址:

HTML 和 CSS 只要根据以上教程学习就足够了,但 JavaScript 则是不够的,以上教程缺少了 ES6 及更高版本的内容,后面我再推荐其他学习资源进行补充。

视频教程方面,慕课网、极客学院等都有基础课程,但都是收费的,而且价格不菲,性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶:响应式开发与前端框架》两套课程的组合套餐就要 988 元了,而内容还没有上面免费教程的齐全。如果真要看视频,那我会推荐网易云课堂的一些免费课程:

书籍方面,HTML 和 CSS 基础方面的,首推《Head First HTML与CSS》,编排设计通俗易懂,就连完全零基础的非 IT 人员都适合学习。不过,Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过,Head First 有另一本书讲解了 HTML5,叫《Head First HTML5 Programming》,不过,要熟悉 HTML5 的用法,还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍,因此,我推荐另一本《CSS3实用指南》

JavaScript 方面,我首推《JavaScript高级程序设计》这本书,书中内容由浅入深,也是写得通俗易懂,适合入门。另外,有些人会推荐《JavaScript权威指南》,但这本书主要还是一本字典书,略显晦涩,其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的,为了补充 ES6 的内容,推荐阮一峰的《ES6标准入门》,目前是第3版,内容已经覆盖了最新版本的 ES2017。另外,因为这是一本开源教材,所以也可以直接去阮一峰的官网免费阅读,以下是链接地址:

另外,有一套系列书叫《You Don't Know JS》也要推荐给大家,也是开源教材,这套书会让你对 JavaScript 知其然也知其所以然,也包含了 ES6 的内容,不过这套书面向初学者的,只适合用来进阶。也出版了中文翻译的书籍,叫《你不知道的JavaScript》,目前只有上卷和中卷两本,据评价,上卷的翻译还不错,但中卷的翻译则一般般,下卷不知道什么时候才出版。以下是系列书的github地址:

top Created with Sketch.