入门标准
入门标准很简单,就一条:达到能参与Web前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript这三大基础技术栈肯定是需要掌握的,但要能参与实际项目开发,肯定还要掌握其他一些主流的框架体系。
几年前,jQuery+Bootstrap可以说是一统江湖,是前端领域的绝对霸主。而这几年,随着Angular、React、Vue等框架的兴起,变成了百家争鸣的局面。这几年,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其实分为三部分:ECMAScript、DOM和BOM。ECMAScript简称ES,是JavaScript的核心,目前最新版本已经是ES,是ES6的第三个小版本。DOM是文档对象模型,其实就是一套访问和操作HTML所有元素的API。BOM则是浏览器对象模型,用于访问和操作浏览器的一些特性。
视频教程方面,慕课网、极客学院等都有基础课程,但都是收费的,而且价格不菲,性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶:响应式开发与前端框架》两套课程的组合套餐就要元了,而内容还没有上面免费教程的齐全。如果真要看视频,那我会推荐网易云课堂的一些免费课程:
从零玩转HTML5前端+跨平台开发
H5/web前端开发|HTML5+CSS3
李炎恢JavaScript教程第一季
书籍方面,HTML和CSS基础方面的,首推《HeadFirstHTML与CSS》,编排设计通俗易懂,就连完全零基础的非IT人员都适合学习。不过,HeadFirst这本书没有涉及到HTML5和CSS3的更新内容。不过,HeadFirst有另一本书讲解了HTML5,叫《HeadFirstHTML5Programming》,不过,要熟悉HTML5的用法,还是要先掌握一点JavaScript基础。CSS3方面HeadFirst则没有相应的书籍,因此,我推荐另一本《CSS3实用指南》。
JavaScript方面,我首推《JavaScript高级程序设计》这本书,书中内容由浅入深,也是写得通俗易懂,适合入门。另外,有些人会推荐《JavaScript权威指南》,但这本书主要还是一本字典书,略显晦涩,其实不适合入门。不过《JavaScript高级程序设计》还是基于ES5的,为了补充ES6的内容,推荐阮一峰的《ES6标准入门》,目前是第3版,内容已经覆盖了最新版本的ES。
对于刚接触当代前端的人员来说,存在太多陌生的概念需要了解,一时可能难以消化,Vue的作者尤雨溪写过一篇《新手向:Vue2.0的建议学习顺序》,可以按照他的建议去学习。
学习资源方面,最好的应该就是官方文档了。另外,《Vue.js实战》这本书有尤雨溪作推荐序,也可以买来看看,可以作为