最近在學(xué)習(xí)javaScript，然后先制定一下自己的學(xué)習(xí)路線(xiàn)方便以后的學(xué)習(xí)

文章基本上是copy別人的，人家寫(xiě)得特別的好，所以拿來(lái)學(xué)習(xí)學(xué)習(xí)，同時(shí)分享給更多的人

--------------------------------Javascript學(xué)習(xí)路線(xiàn)--------------------------------level 1首先你要對(duì)js的基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)的學(xué)習(xí)，腦海中先有一幅知識(shí)藍(lán)圖。我們現(xiàn)在說(shuō)的js其實(shí)包含三部分：（1）ECMAScript規(guī)范、（2）DOM規(guī)范、（3）BOM規(guī)范。（1）ECMA規(guī)范定義了js作為一門(mén)編程語(yǔ)言的標(biāo)準(zhǔn)，包含變量基本類(lèi)型、對(duì)象、函數(shù)、作用域、運(yùn)算符、流程控制語(yǔ)句等（2）DOM規(guī)范則規(guī)定了js如何與網(wǎng)頁(yè)進(jìn)行交互，包括訪問(wèn)與操作DOM節(jié)點(diǎn)、不同類(lèi)型的節(jié)點(diǎn)都有哪些特性和方法、事件的監(jiān)聽(tīng)與傳播等。（3）BOM規(guī)范定義了js如何與瀏覽器進(jìn)行交互，包含window對(duì)象、location對(duì)象、navigator對(duì)象、history對(duì)象等?；A(chǔ)知識(shí)的學(xué)習(xí)最好就是看書(shū)了，像犀牛書(shū)、蝴蝶書(shū)、高程，都是經(jīng)典的教材。 當(dāng)你掌握了以上基礎(chǔ)知識(shí)的時(shí)候，差不多能寫(xiě)出像彈出、移動(dòng)、刪除節(jié)點(diǎn)等動(dòng)效，你體會(huì)到了所謂交互其實(shí)就是用DOM操作來(lái)模擬出各種“假象”。這個(gè)時(shí)候你會(huì)開(kāi)始接觸jquery，或許接觸的還更早一些。你開(kāi)始逐個(gè)嘗試jquery封裝好的各個(gè)API，發(fā)現(xiàn)用jquery書(shū)寫(xiě)代碼確實(shí)簡(jiǎn)單了很多。jquery的學(xué)習(xí)和原生js的學(xué)習(xí)其實(shí)也沒(méi)必要有嚴(yán)格的先后順序，我一開(kāi)始也是穿插的來(lái)學(xué)的。你只要清楚哪些是js的內(nèi)容，哪些是jquery給你包裝出來(lái)的快捷方法就行。 嘗到j(luò)query的甜頭之后，你會(huì)發(fā)現(xiàn)一個(gè)大寶藏，那就是jquery插件。你要用到的各種組件網(wǎng)上基本上都有現(xiàn)成的，你開(kāi)始在網(wǎng)上扒一些插件下來(lái)，自己連猜帶蒙改改代碼，改出一個(gè)自己能用的版本。你這個(gè)時(shí)候也會(huì)開(kāi)始用jquery-ui，這一套比較完善的插件庫(kù)，能解決你很多需求。 這就是第一階段，你對(duì)js有了一個(gè)基本了解，自己摸索著能改改別人插件，差不多能寫(xiě)出一個(gè)完整的“玩具頁(yè)面”了。 level 2在上面的基礎(chǔ)上寫(xiě)了一段時(shí)間代碼后，你會(huì)感覺(jué)到自己的調(diào)試效率很低。具體表現(xiàn)為，你寫(xiě)的代碼有時(shí)候總是運(yùn)行不出自己想要的結(jié)果，代碼報(bào)錯(cuò)了你卻怎么調(diào)也調(diào)不對(duì)。這時(shí)候你就要對(duì)js進(jìn)行更深一輪的理解了，你要對(duì)js中的一些概念做到真正的理解，比如作用域鏈、原型、閉包。比如你要知道js運(yùn)算的自動(dòng)轉(zhuǎn)化機(jī)制，為什么2+“1”是string，而2-“1”是number。typeof和typeof()前者是操作符后者是內(nèi)置函數(shù)。如何判斷一個(gè)變量是否是數(shù)組，等等這些細(xì)節(jié)問(wèn)題，都是有對(duì)應(yīng)的概念和原理能解釋的，你要做到知其所以然。這個(gè)階段你會(huì)開(kāi)始與服務(wù)端進(jìn)行交互了，原生的Ajax要理解并能手寫(xiě)，jquery的ajax要熟練使用。你會(huì)遇到ajax的跨域問(wèn)題，開(kāi)始掌握發(fā)送跨域請(qǐng)求，知道JSONP是個(gè)什么東西，從原理上。 在改了無(wú)數(shù)別人的插件后，你需要開(kāi)始自己動(dòng)手寫(xiě)一個(gè)jquery插件了，因?yàn)閯e人的難免有坑，自己寫(xiě)的才最可控。另外對(duì)于自己的邏輯和代碼組織能力也是一個(gè)鍛煉。自己嘗試寫(xiě)插件吧，從簡(jiǎn)單到復(fù)雜。比如一個(gè)彈框插件，要具備可以配置寬高、標(biāo)題、內(nèi)容、回調(diào)函數(shù)等功能?；蛘呤且粋€(gè)焦點(diǎn)圖滑動(dòng)插件，不要看別人的代碼，自己完全從頭開(kāi)始構(gòu)思。 當(dāng)你能理解jquery的插件機(jī)制，并能自己寫(xiě)出項(xiàng)目所需的插件時(shí)，你的js水平又上了一個(gè)等級(jí)。做到以上這些，你基本可以應(yīng)付一個(gè)項(xiàng)目的前端需求了。也就是說(shuō)，你寫(xiě)出來(lái)的頁(yè)面不再是玩具了，可以上線(xiàn)使用了。 level 3接下來(lái)你應(yīng)該開(kāi)始接觸一些更復(fù)雜的系統(tǒng)了，就是所謂的“富客戶(hù)端”，前端代碼量上了一個(gè)檔次，一個(gè)js文件動(dòng)輒成白上千行。你會(huì)發(fā)現(xiàn)js代碼還像以前那樣從上往下堆著，太亂了。你寫(xiě)的ajax返回的數(shù)據(jù)越來(lái)越復(fù)雜，用拼字符串的方式進(jìn)行局部更新太費(fèi)力了。 這個(gè)時(shí)候你會(huì)開(kāi)始用前端模板引擎來(lái)進(jìn)行局部更新，比如handlebars、artTemplate等等。你需要熟練使用他們，并嘗試去理解這些模板引擎的運(yùn)行機(jī)制。 然后你要開(kāi)始使用mvc模式來(lái)組織你日益復(fù)雜的代碼了，典型的框架就是backbone。但是backbone現(xiàn)在已經(jīng)過(guò)時(shí)了，雖然用的不多了，但如果你還是新手，起碼去了解一些它的思維，知道用邏輯層次來(lái)劃分代碼結(jié)構(gòu)是怎么個(gè)搞法。知道前端路由是個(gè)什么機(jī)制。 到了這個(gè)階段，你已經(jīng)告別了原先的純“刀耕火種”時(shí)代了，你開(kāi)始使用各種框架來(lái)幫助你更好的完成功能。 level 3 plus為什么有個(gè)3 plus階段呢？因?yàn)槟愦藭r(shí)需要進(jìn)行的是一個(gè)橫向的擴(kuò)展，js的學(xué)習(xí)本來(lái)就是一個(gè)縱橫交叉的網(wǎng)絡(luò)嘛。 此時(shí)是學(xué)習(xí)HTML5的最佳時(shí)機(jī)，一方面你對(duì)js的基礎(chǔ)知識(shí)有了一定的儲(chǔ)備，另一方面你也可能開(kāi)始接觸移動(dòng)端的頁(yè)面了。 HTML5新增的標(biāo)簽倒是小菜一碟，像<header>、<footer>、<section>、<video>之類(lèi)的你在之前也多多少少接觸了。更多的內(nèi)容在HTML5新增的js API這塊。比如新增的File API，localStorage/sessionStorage、canvas API、histroy的擴(kuò)展，xhr的擴(kuò)展等等。這些在移動(dòng)端都是可以放心使用的，需要你對(duì)這些新特性一一學(xué)習(xí)。 你也應(yīng)該在這個(gè)階段嘗試移動(dòng)端的頁(yè)面，了解它與PC頁(yè)面開(kāi)發(fā)的不同點(diǎn)。比如你應(yīng)該在移動(dòng)端拋棄jquery，開(kāi)始使用zepto。了解touch事件，了解移動(dòng)端click 300毫秒延遲的問(wèn)題并找到解決方法。嘗試寫(xiě)移動(dòng)端的組件，如無(wú)限滾動(dòng)、左右滑動(dòng)插件，并解決移動(dòng)端的性能問(wèn)題。在網(wǎng)上找找司徒正美、張代平、葉小釵等總結(jié)的移動(dòng)端兼容問(wèn)題的解決方案等等。 總之，在這個(gè)階段，你要能拿得下移動(dòng)端頁(yè)面的開(kāi)發(fā)，并熟練使用HTML5的新特性。 level 4經(jīng)歷了上面階段，你的單兵作戰(zhàn)能力已經(jīng)算可以了。這個(gè)時(shí)候你會(huì)面臨團(tuán)隊(duì)協(xié)作以及模塊化開(kāi)發(fā)。這個(gè)時(shí)候你就有必要了解模塊化的規(guī)范了。你需要了解commonjs、AMD、CMD都是包含哪些內(nèi)容，他們是什么關(guān)系，有哪些區(qū)別。 你起碼得使用一下requirejs，知道老牌經(jīng)典AMD模塊化工具是個(gè)什么思維，解決了哪些開(kāi)發(fā)中的痛點(diǎn)。seajs你也需要了解，知道seajs對(duì)AMD進(jìn)行了哪些改進(jìn)和包容。最后，你得知道commonjs規(guī)范是如何借助打包工具（browserify、webpack）一統(tǒng)天下，通吃服務(wù)端(nodejs)以及瀏覽器端的。 模塊化開(kāi)發(fā)與打包是分不開(kāi)的，這個(gè)階段，你也應(yīng)該自己嘗試使用grunt、gulp、webpack對(duì)項(xiàng)目進(jìn)行構(gòu)建和打包。盡管grunt已經(jīng)沒(méi)落，眼看未來(lái)是webpack的天下。 level 5上面幾個(gè)階段的內(nèi)容，其實(shí)已經(jīng)是三年前乃至更早時(shí)候的東西了。在這個(gè)階段，你才真正與時(shí)代接軌了。那就是mvvm。 你應(yīng)該首先了解mvvm模式的開(kāi)發(fā)思想，它是如何用雙向綁定的方式來(lái)解脫我們的DOM操作，又是如何用組件化的思維來(lái)更好組織我們的代碼。 老牌的mvvm框架如ember、knockout，你估計(jì)能用上的概率不高了。但是從2013年開(kāi)始火起來(lái)的avalon和angular你起碼得用一個(gè)。做到能用mvvm架起一個(gè)項(xiàng)目的程度。關(guān)于angular我曾經(jīng)寫(xiě)過(guò)一個(gè)系列的文章，有興趣的同學(xué)可以在我博客搜索，或者百度關(guān)鍵字「走近angularjs」。 最新也是目前最火的vuejs你可以得開(kāi)始了解，它面向未來(lái)，只兼容高級(jí)瀏覽器，性能極佳而且API極簡(jiǎn)，是移動(dòng)端mvvm方案的不二選擇。 學(xué)習(xí)mvvm，會(huì)對(duì)你的開(kāi)發(fā)習(xí)慣和開(kāi)發(fā)思維進(jìn)行一次轉(zhuǎn)變，相對(duì)于jquery時(shí)代?？赡芤婚_(kāi)始會(huì)不習(xí)慣，但這個(gè)轉(zhuǎn)變是你必須經(jīng)歷的，因?yàn)椋鼤?huì)變成你未來(lái)學(xué)習(xí)其他框架的基石。 level 6在與時(shí)代接上軌之后，你還不能停，還得更近一步。因?yàn)槲磥?lái)已經(jīng)離我們很近了。沒(méi)錯(cuò)，我說(shuō)的就是ES2015。ES2015，乳名ES6，已于去年發(fā)布正式版，雖然瀏覽器的支持程度還在慢慢完善，但是我們現(xiàn)在使用babel進(jìn)行編譯后，已經(jīng)完全可以工作了。 所以你現(xiàn)在就應(yīng)該開(kāi)始了解并使用ES6了。事實(shí)上，我們項(xiàng)目組也是今年才開(kāi)始使用ES6的，對(duì)于新特性，越早上手肯定是越好，畢竟還需要一定時(shí)間的熟悉，以及開(kāi)發(fā)模式的架構(gòu)。 另外一塊新技術(shù)就是React，以及React Native、淘寶weex這樣的混合app開(kāi)發(fā)框架。這又是一套全新的開(kāi)發(fā)理念，在未來(lái)兩三年也必定會(huì)占領(lǐng)越來(lái)越多的份額，所以，他們的學(xué)習(xí)也是不能落下的。其實(shí)在我們公司，目前還未開(kāi)始React的使用，我相信在不久后的某個(gè)時(shí)間節(jié)點(diǎn)，也就自然上場(chǎng)了。 到了這個(gè)階段，js方面的主流知識(shí)和框架，你也已經(jīng)掌握的差不多了。其實(shí)這個(gè)時(shí)候也就不需要我來(lái)指點(diǎn)學(xué)習(xí)路線(xiàn)了，因?yàn)槟愕搅诉@個(gè)階段，自然也就明白了行業(yè)的發(fā)展趨勢(shì)，能夠自己把控該學(xué)什么該用什么了。