前端自學路線之JavaScript篇

今天來聊聊前端工程師的核心技能之——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

源碼深度研究以及研發框架。應該明白是什麼意思了哈。因為我自己目前也還不到這個階段，所以也就不誤人子弟了。放在這裏，當作奮鬥目標好了。

今天要說的就這麼多了，這差不多也是我這幾年的學習路線，基本和行業發展的進度吻合。但這也隻是一條主線而已，前端領域的知識是網狀的，這中間又會穿插各種大小知識，需要在學習的過程中點滴積累了。關於主線之外的其他知識點，我會在後續的文章中再給大家叨叨。