最近在學習javaScript，然后先制定一下自己的學習路線方便以后的學習

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

--------------------------------Javascript學習路線--------------------------------level 1首先你要對js的基礎知識進行系統的學習，腦海中先有一幅知識藍圖。我們現在說的js其實包含三部分：（1）ECMAScript規范、（2）DOM規范、（3）BOM規范。（1）ECMA規范定義了js作為一門編程語言的標準，包含變量基本類型、對象、函數、作用域、運算符、流程控制語句等（2）DOM規范則規定了js如何與網頁進行交互，包括訪問與操作DOM節點、不同類型的節點都有哪些特性和方法、事件的監聽與傳播等。（3）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方面的主流知識和框架，你也已經掌握的差不多了。其實這個時候也就不需要我來指點學習路線了，因為你到了這個階段，自然也就明白了行業的發展趨勢，能夠自己把控該學什么該用什么了。