前端自學路線之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

源碼深度研究以及研發框架。應該明白是什麼意思了哈。由於我本身目前也還不到這個階段，因此也就不誤人子弟了。放在這裏，看成奮鬥目標好了。

 

今天要說的就這麼多了，這差很少也是我這幾年的學習路線，基本和行業發展的進度吻合。但這也只是一條主線而已，前端領域的知識是網狀的，這中間又會穿插各類大小知識，須要在學習的過程當中點滴積累了。關於主線以外的其餘知識點，我會在後續的文章中再給你們叨叨。敬請期待下一篇：前端自學路線之綜合篇。