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

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

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