前端自学路线之js篇

上一篇咱们讲了前端切图的学习路线，不知你们有没有收获。今天来聊聊前端工程师的核心技能之——JavaScript。js这门语言看似简单，但要作到入门、熟练以致于架构的程度，仍是有一段路要走的，今天就来聊聊这段路上都要经历些什么。准备好小板凳，开讲~

 

level 1

首先你要对js的基础知识进行系统的学习，脑海中先有一幅知识蓝图。咱们如今说的js其实包含三部分：ECMAScript规范、DOM规范、BOM规范，你要知道这三部分都有哪些内容。其中ECMA规范定义了js做为一门编程语言的标准，包含变量基本类型、对象、函数、做用域、运算符、流程控制语句等。DOM规范则规定了js如何与网页进行交互，包括访问与操做DOM节点、不一样类型的节点都有哪些特性和方法、事件的监听与传播等。BOM规范定义了js如何与浏览器进行交互，包含window对象、location对象、navigator对象、history对象等。

 

基础知识的学习最好就是看书了，像犀牛书、蝴蝶书、高程，都是经典的教材。

 

当你掌握了以上基础知识的时候，差很少能写出像弹出、移动、删除节点等动效，你体会到了所谓交互其实就是用DOM操做来模拟出各类“假象”。这个时候你会开始接触jquery，或许接触的还更早一些。你开始逐个尝试jquery封装好的各个API，发现用jquery书写代码确实简单了不少。jquery的学习和原生js的学习其实也不必有严格的前后顺序，我一开始也是穿插的来学的。你只要清楚哪些是js的内容，哪些是jquery给你包装出来的快捷方法就行。

 

尝到jquery的甜头以后，你会发现一个大宝藏，那就是jquery插件。你要用到的各类组件网上基本上都有现成的，你开始在网上扒一些插件下来，本身连猜带蒙改改代码，改出一个本身能用的版本。你这个时候也会开始用jquery-ui，这一套比较完善的插件库，能解决你不少需求。

 

这就是第一阶段，你对js有了一个基本了解，本身摸索着能改改别人插件，差很少能写出一个完整的“玩具页面”了。

 

level 2

在上面的基础上写了一段时间代码后，你会感受到本身的调试效率很低。具体表现为，你写的代码有时候老是运行不出本身想要的结果，代码报错了你却怎么调也调不对。这时候你就要对js进行更深一轮的理解了，你要对js中的一些概念作到真正的理解，好比做用域链、原型、闭包。好比你要知道js运算的自动转化机制，为何2+“1”是string，而2-“1”是number。typeof和typeof()前者是操做符后者是内置函数。如何判断一个变量是不是数组，等等这些细节问题，都是有对应的概念和原理能解释的，你要作到知其因此然。

 

这个阶段你会开始与服务端进行交互了，原生的ajax要理解并能手写，jquery的ajax要熟练使用。你会遇到ajax的跨域问题，开始掌握发送跨域请求，知道JSONP是个什么东西，从原理上。

 

在改了无数别人的插件后，你须要开始本身动手写一个jquery插件了，由于别人的不免有坑，本身写的才最可控。另外对于本身的逻辑和代码组织能力也是一个锻炼。本身尝试写插件吧，从简单到复杂。好比一个弹框插件，要具有能够配置宽高、标题、内容、回调函数等功能。或者是一个焦点图滑动插件，不要看别人的代码，本身彻底从头开始构思。

 

当你能理解jquery的插件机制，并能本身写出项目所需的插件时，你的js水平又上了一个等级。作到以上这些，你基本能够应付一个项目的前端需求了。也就是说，你写出来的页面再也不是玩具了，能够上线使用了。

 

level 3

接下来你应该开始接触一些更复杂的系统了，就是所谓的“富客户端”，前端代码量上了一个档次，一个js文件动辄成白上千行。你会发现js代码还像之前那样从上往下堆着，太乱了。你写的ajax返回的数据愈来愈复杂，用拼字符串的方式进行局部更新太费力了。

 

这个时候你会开始用前端模板引擎来进行局部更新，好比handlebars、artTemplate等等。你须要熟练使用他们，并尝试去理解这些模板引擎的运行机制。

 

而后你要开始使用mvc模式来组织你日益复杂的代码了，典型的框架就是backbone。可是backbone如今已通过时了，虽然用的很少了，但若是你仍是新手，起码去了解一些它的思惟，知道用逻辑层次来划分代码结构是怎么个搞法。知道前端路由是个什么机制。

 

到了这个阶段，你已经告别了原先的纯“刀耕火种”时代了，你开始使用各类框架来帮助你更好的完成功能。

 

level 3 plus

为何有个3 plus阶段呢？由于你此时须要进行的是一个横向的扩展，js的学习原本就是一个纵横交叉的网络嘛。

 

此时是学习HTML5的最佳时机，一方面你对js的基础知识有了必定的储备，另外一方面你也可能开始接触移动端的页面了。

 

HTML5新增的标签却是小菜一碟，像<header>、<footer>、<section>、<video>之类的你在以前也多多少少接触了。更多的内容在HTML5新增的js API这块。好比新增的File API，localStorage/sessionStorage、canvas API、histroy的扩展，xhr的扩展等等。这些在移动端都是能够放心使用的，须要你对这些新特性一一学习。

 

你也应该在这个阶段尝试移动端的页面，了解它与PC页面开发的不一样点。好比你应该在移动端抛弃jquery，开始使用zepto。了解touch事件，了解移动端click 300毫秒延迟的问题并找到解决方法。尝试写移动端的组件，如无限滚动、左右滑动插件，并解决移动端的性能问题。在网上找找司徒正美、张代平、叶小钗等总结的移动端兼容问题的解决方案等等。

 

总之，在这个阶段，你要能拿得下移动端页面的开发，并熟练使用HTML5的新特性。

 

level 4

经历了上面阶段，你的单兵做战能力已经算能够了。这个时候你会面临团队协做以及模块化开发。这个时候你就有必要了解模块化的规范了。你须要了解commonjs、AMD、CMD都是包含哪些内容，他们是什么关系，有哪些区别。

 

你起码得使用一下requirejs，知道老牌经典AMD模块化工具是个什么思惟，解决了哪些开发中的痛点。seajs你也须要了解，知道seajs对AMD进行了哪些改进和包容。最后，你得知道commonjs规范是如何借助打包工具（browserify、webpack）一统天下，通吃服务端(nodejs)以及浏览器端的。

 

模块化开发与打包是分不开的，这个阶段，你也应该本身尝试使用grunt、gulp、webpack对项目进行构建和打包。尽管grunt已经没落，眼看将来是webpack的天下。

 

level 5

上面几个阶段的内容，其实已是三年前乃至更早时候的东西了。在这个阶段，你才真正与时代接轨了。那就是mvvm。

 

你应该首先了解mvvm模式的开发思想，它是如何用双向绑定的方式来解脱咱们的DOM操做，又是如何用组件化的思惟来更好组织咱们的代码。

 

老牌的mvvm框架如ember、knockout，你估计能用上的几率不高了。可是从2013年开始火起来的avalon和angular你起码得用一个。作到能用mvvm架起一个项目的程度。关于angular我曾经写过一个系列的文章，有兴趣的同窗能够在我博客搜索，或者百度关键字「走近angularjs」。

 

最新也是目前最火的vuejs你能够得开始了解，它面向将来，只兼容高级浏览器，性能极佳并且API极简，是移动端mvvm方案的不二选择。

 

学习mvvm，会对你的开发习惯和开发思惟进行一次转变，相对于jquery时代。可能一开始会不习惯，但这个转变是你必须经历的，由于，它会变成你将来学习其余框架的基石。

 

level 6

在与时代接上轨以后，你还不能停，还得更近一步。由于将来已经离咱们很近了。没错，我说的就是ES2015。ES2015，乳名ES6，已于去年发布正式版，虽然浏览器的支持程度还在慢慢完善，可是咱们如今使用babel进行编译后，已经彻底能够工做了。

 

因此你如今就应该开始了解并使用ES6了。事实上，咱们项目组也是今年才开始使用ES6的，对于新特性，越早上手确定是越好，毕竟还须要必定时间的熟悉，以及开发模式的架构。

 

另一块新技术就是React，以及React Native、淘宝weex这样的混合app开发框架。这又是一套全新的开发理念，在将来两三年也一定会占领愈来愈多的份额，因此，他们的学习也是不能落下的。其实在咱们公司，目前还未开始React的使用，我相信在不久后的某个时间节点，也就天然上场了。

 

到了这个阶段，js方面的主流知识和框架，你也已经掌握的差很少了。其实这个时候也就不须要我来指点学习路线了，由于你到了这个阶段，天然也就明白了行业的发展趋势，可以本身把控该学什么该用什么了。

 

level 7

源码深度研究以及研发框架。应该明白是什么意思了哈。由于我本身目前也还不到这个阶段，因此也就不误人子弟了。放在这里，看成奋斗目标好了。

 

今天要说的就这么多了，这差很少也是我这几年的学习路线，基本和行业发展的进度吻合。但这也只是一条主线而已，前端领域的知识是网状的，这中间又会穿插各类大小知识，须要在学习的过程当中点滴积累了。关于主线以外的其余知识点，我会在后续的文章中再给你们叨叨。敬请期待下一篇：前端自学路线之综合篇。