版權申明：
此文章首發(fā)于公眾號程序員在深圳，搜索 studycode 即可關注
本文無需授權即可轉載，轉載時請務必注明作者
這篇文章是"前端開發(fā)，從草根到英雄系列"的第二部分，在第一部分，你學到了如何使用HTML和CSS創(chuàng)建布局的最佳實踐。在第二部分，我們會把JavaScript作為獨立的語言來學習，我們將學習如何添加交互式的界面，JavaScript設計以及設計模式，最后我們會學習如何創(chuàng)建web應用。
和HTML、CSS一致，網上有大量的JavaScript指南，對于新手來說，很難分辨這些指南分別的用途，也不知道以怎樣的順序去學習這些指南。這篇文章的目的是給你提供一個線路圖，作為你成為一個前端工程師的導航。
如果你還沒有閱讀第一篇，在讀這篇之前，可以點擊下面的鏈接閱讀
JavaScript基礎
JavaScript是一個跨平臺的程序語言，它幾乎可以做所有事情。在你了解了開發(fā)者如何使用JavaScript的基礎之后，我們再詳細的探討這門語言。
語言
在學習JavaScript是如何應用于web之前，首先了解這門語言本身。我們來讀一下Mozilla開發(fā)者網絡的Language basics crash course，這個指南會描述基本的語言結構，包括變量，條件和函數。
在此之后，再讀一讀MDN的JavaScript指南的以下幾個部分:
不要過于擔心記不住特定的語法，你隨時可以回過頭來查閱。相反，你要專注于像變量實例化、循環(huán)和函數等概念上。如果一時消化不了是正常的，可以適當的略過，學完后面內容再時不時回顧一下前面的內容。因為當你練習這些概念時，你才會對這些更加深刻。
為了打破單調的純文字內容的學習，可以看一下Codecademy提供的JavaScript課程，它很容易上手，并且非常有趣。同樣的，如果你有時間，對于每一個我上面列出的概念，讀一下Eloquent JavaScript相應的章節(jié)，相信可以加深你的理解。Eloquent JavaScript是一個非常棒的在線書籍，幾乎所有的有追求的JavaScript前端工程師都會閱讀它。
交互
JavaScript作為一門語言，你已經對它有所了解，下一步要了解它如何應用于web，要了解JavaScript是如何與網站交互，你需要知道文檔對象模型（Document Object Model）
DOM是HTML文檔中具體的結構，它是對應于HTML節(jié)點的、由JavaScript對象構成的樹型結構，更進一步，你可以讀一下CSSTricks發(fā)表的什么是DOM這篇文章。它對DOM提供了簡單直接的描述
JavaScript可以修改DOM元素，這里有一個選擇HTML元素并修改它的內容的例子：
var container = document.getElementById(“container”);
container.innerHTML = 'New Content!';
不要擔心，這僅僅是一個簡單的例子，你可以通過JavaScript "DOM操作"做更多的事情。想學習更多關于JavaScript如何與DOM交互的內容，你要通過以下MDN部分的指導，The Document Object Model
再次強調，把注意力集中到概念而不是語法上。試著回答以下問題：
- 什么是DOM？
- 如何查詢元素？
- 如何添加事件監(jiān)聽者？
- 如何合適的改變DOM節(jié)點屬性？
要獲得一個通用的JavaScript DOM操作列表，可以看一下PlainJS提供的JavaScript函數和幫助，這個網站提諸如如何設置HTML元素樣式和連接鍵盤事件監(jiān)聽者等例子，如果你覺得還不夠想更深入，你都可以閱讀Eloquent JavaScript中的DOM部分。
檢查
要調試JavaScript，我們使用內嵌在瀏覽器中的開發(fā)工具，幾乎所有的瀏覽器中都會有檢查面板，通過它你可以查看頁面的源碼，你可以查看JavaScript的執(zhí)行，在終端上打印調試狀態(tài)，還可以查看網絡請求和回復。
這里是Chrome開發(fā)工具指南，如果你使用的是Firefox，你可以查看這個指南
基本練習
目前為止，我們還有很多JavaScript知識要學習，上一章我們已然學了不少新知識，現在我們休息一下，然后做幾個小實驗，他們會幫助鞏固你剛學的一些概念。
實驗1
進入實驗1，我們打開AirBnb，同時打開瀏覽器頁面檢查，點擊終端標簽，在終端里你可以執(zhí)行JavaScript語句。我們將要做的事是從操作一些頁面中的元素而獲得一些樂趣。試試看，你是否可以進行下面將要描述的所有DOM的操作。
我選擇AirBnb的頁面是因為它們的CSS類名非常直接，不會被一些編譯器處理的模糊不清，所以你可以選擇性的在任何頁面做這些操作：
- 選擇一個具有唯一類名的header標簽，改變其中的文字
- 選擇任何頁面上的元素，然后刪除它
- 選擇任何一個元素，改變它的某一個CSS屬性
- 選擇一個指定的段落標簽，將它下移250個像素
- 選擇任何組件，例如一個面板，調整它的可視性
- 定義一個函數名doSomething: 可以彈出"Hello world"警告，然后想辦法執(zhí)行它
- 選擇一個特定的段落標簽，讓它監(jiān)聽一個click事件，一旦該事件觸發(fā)，則運行doSomething
如果你卡住了，可以在JavaScript Functions and Helpers中查找相關知識，這些任務基本上都是基于這個指南的，下面是第一個問題的的例子：
var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'
這個實驗的主要目的是練習你所學的JavaScript和DOM之間的操作，并觀察他們的行為。
實驗2
使用CodePen寫幾個包含邏輯的JavaScript函數，以及操作DOM元素。這個實驗的核心內容是將你從草根到英雄第一部分學到的知識和JavaScript結合，下面的幾個例子可能會給你帶來靈感：
更多JavaScript
目前你已經了解了一些JavaScript知識，并且為此做了一些練習，讓我們繼續(xù)學習一些高級的概念吧。下面的概念不一定互相有聯系，我將它們列在這里是因為它們可以幫助你理解如何構建更復雜的前端系統。你將在后續(xù)的實驗和框架章節(jié)理解如何使用這些概念。
語言
一旦你用JavaScript工作，你將遇到很多高級概念，我將這些概念列出來，當你有時間時可以進行閱讀。同樣的，Eloquent JavaScript覆蓋了大部分概念，也可以用來補充你的知識。
Imperative vs. Declarative
JavaScript和DOM如何交互，有兩種方法：imperative和declarative，一方面，declarative程序專注于what，另一方面，imperative程序專注于how
var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
var newChild = document.createElement(‘p’)
newChild.appendChild(document.createTextNode(‘Hello world!’))
newChild.setAttribute(‘class’, ‘text’)
newChild.setAttribute(‘data-info’, ‘header’)
hero.appendChild(newChild)
})
}
上面是一個imperative程序的列子，我們手動查詢出一個元素，并且將UI狀態(tài)存儲在里面，換句話說，該程序核心在于如何(how)完成某件事情。這段程序的最大問題是它不夠穩(wěn)定：如果某個人修改了這段代碼中的類名，例如將hero修改為villain，該監(jiān)聽事件將不會被觸發(fā)，因為DOM中不在有hero類了。
Declarative程序解決了這個問題，你可以把選擇元素的操作留給框架或庫去完成。這種做法讓你專注于做什么(what)而不是如何這樣做(how)。想要了解更多，讀一下JavaScript的狀態(tài)——從Imperative到Declarative和3D Web 開發(fā) #1: Declarative vs. Imperative
這篇指南首先告訴你imperative方法，然后才是Angular和React庫的declarative方法，我建議按照這樣的順序學習，可以讓你更清楚的了解到declarative解決了什么問題。
Ajax
通過以上的文章和指南，你應該注意到了Ajax，Ajax是一項可以使用JavaScript和服務器交互的技術。
例如，當你在網頁上提交一個表單，這個動作會將你的輸入作為一個HTTP請求發(fā)送給服務器。當你在Twitter上發(fā)送一條微博，你的Twitter客戶端發(fā)送了一條HTTP請求給Twitter的API服務器，并且使用服務器返回的數據更新頁面。
你可以看下什么是Ajax獲得更多Ajax的知識。如果你仍然不能完全理解AJAX的概念，看一下Explain it like i'm 5, what is Ajax，如果覺得還不夠多，你可以讀一讀Eloquent JavaScript的HTTP章節(jié)。
今天為止，新的瀏覽器請求標準是Fetch，想要了解更多的Fetch的內容，可以讀一下Dan Walsh的這篇文章，里面介紹了Fetch是如何工作的，以及如何使用它。你還可以在這篇文章中補充Fetch polyfill知識。
jQuery
目前為止，你已經使用JavaScript對DOM做了很多操作了。事實是，已經有很多DOM操作的庫，他們提供API來簡化你的代碼。
最流行的DOM操作庫是jQuery，記住，jQuery是一個imperative庫，它是在前端系統還沒有今天這么復雜的時候開發(fā)的。今天，為了管理復雜的UI，我們會使用declarative框架和庫，例如Angular和React。然而，我仍然建議你學習jQuery，因為作為一名前端工程師，你一定會在工作中遇到它的。
學習jQuery基礎，可以看下jQuery學習中心，它會一步步的告訴你animations和事件處理這些重要的概念。如果你還想學習更多入門知識，你可以看下Codecademy的jQuery課程
記住，jQuery不是唯一的imperative DOM操作解決方案，PlainJS和You Might Not Need jQuery是兩個很好的資源，他們會告訴你和jQuery一樣的頻繁使用的JavaScript函數。
ES5 vs. ES6
另一個重要的概念是ECMAScript以及它和Javascript的關系。目前你將會碰到兩個主要的標準：ES5和ES6。ES5和ES6是JavaScript使用的ECMAScript標準，你可以把他們作為JavaScript的版本來理解，最終的ES5草案擬于2009年，也是我們目前一直在使用的。
ES6，也叫ES2015，它是最新的標準，帶來了一些新的諸如常量，類，和模板這樣的語言特性。ES6帶來了新的語言功能，但仍然在ES5的基礎上定義語義。例如，ES6中的類僅僅是JavaScript原型繼承的語法修飾。
有必要知道你今天看到的應用，要么使用ES5，要么使用ES6。ES5，ES6，ES2016，ES.Next: JavaScript版本到底怎么了和Dan Wahlins的ES6入門——下一代JavaScript是很好的ES6介紹。接著你可以在ES6功能列表查看ES5到ES6的變化。如果你還想了解更多，去Github代碼庫獲得更多ES6功能信息。
更多練習
恭喜你能夠到達這里，目前你已經學了很多關于JavaScript的知識，下面我們做一些練習。
實驗3
實驗3集中于練習如何應用DOM操作和jQuery技能。在這個試驗中，我們將學會一些結構化的方法，實驗3會要求你克隆Flipboard的主頁，Codecademy上有這個教程，你只需要一步步照做即可：用JavaScript與Flipboard的主頁進行交互指南
在學這篇指南的時候，請把注意力集中在理解如何與網站交互上，當實現了交互之后，就知道如何應用jQuery了。
實驗4
實驗4用介紹性的JavaScript課程將你所學的HTML和CSS結合起來。在這個試驗中，你將創(chuàng)建一個你自己設計的時鐘，并使用JavaScript讓它具有交互性。開始之前，我建議你讀一下HTML，CSS和JavaScript解耦這篇文章，你將從中學到當JavaScript引進時，CSS的基本類命名規(guī)范。下面，我依然從CodePen中挑選了一個列表，作為這個實驗的參考。例如，你可以在CodePen中搜索一個時鐘
你可以使用兩種方法來做這個實驗，第一個是先創(chuàng)建和設計HTML、CSS布局，然后再增加JavaScript交互。第二個方法是先寫JavaScript邏輯，然后把布局加進去。毫無疑問你可以使用jQuery，也可以自由使用原生的JavaScript。
JavaScript框架
當你掌握了JavaScript基礎之后，后續(xù)你需要了解一下JavaScript框架，框架是可以幫助你結構化和組織代碼的JavaScript庫，JavaScript框架是可復用的，并能提供解決復雜前端問題的方案，就像狀態(tài)機，路由機制以及性能優(yōu)化。他們被普遍用來創(chuàng)建web應用
我沒有挨個的描述每個JavaScript框架，然而，這里有一些框架的鏈接：Angular，React + Flux，Ember，Aurelia，Vue，和Meteor。你不需要學習所有的框架，選一個學習即可，不要追趕框架的潮流，取而代之的是，你需要理解框架程序底下的原則和哲學。
架構模型
在學習框架之前，了解一些框架經常用到的架構模型非常重要：model-view-controller，model-view-viewmodel，和model-view-presenter。這些模型被設計用來在應用程序的不同層次創(chuàng)建清晰而分離的特性.
分離的特性是一種建議將應用程序劃分為不同的層次的設計原則。例如，與其讓HTML保留應用狀態(tài)，還不如用一個JavaScript對象——通常被稱為Model——來存儲狀態(tài)。
要了解更多模型，首先閱讀Chrome Developers中的MVC，然后，讀一下理解MVC和MVP(獻給JavaScript和主干開發(fā)者)，在這篇文章中，不用學習'主干'，僅僅了解MVC和MVP即可
對于MVVM，Addy Osman也寫了篇文章：理解MVVM——給JavaScript開發(fā)者的指南， Martin Fowler的散文GUI 架構你也應該讀讀，它既講了原生的MVC，又描述了MVVM是怎么來的。最終，讀下這篇JavaScript MV* 模型，還有一本完美的免費在線書籍Learning JavaScript Design Patterns你也可以看下。
設計模式
JavaScript 框架沒有重復發(fā)明輪子，很多框架都依賴于設計模式，在軟件開發(fā)過程中，你可以把設計模式想象成解決通用問題的模板。
然而學習設計模式不是理解JavaScript的必要條件，我建議你了解以下幾個設計模式
理解并實現一些設計模式不僅僅讓你成為一個更好的工程師，還幫助你理解一些框架的具體實現。
AngularJS
AngularJS是一個JavaScript MVC框架，有時也是一個MVVM框架，它由google維護，并在2010年初次發(fā)布時給JavaScript社區(qū)帶來了一場風暴
Angular是一個declarative框架，對我?guī)椭畲?、幫我理解JavaScript編程是如何從imperative轉換到declarativ思想的文章是來自StackOverflow的這篇文章：AngularJS和jQuery有哪些不同
想更多的了解Angular，可以查看Angular文檔，里面還有一個Angular Cat項目，可以幫你馬上進入編碼狀態(tài)。更完整的學習AngularJs指南可以在Tim Jacobi的Github倉庫中查找。最后，你還可以看一下John Papa寫的這篇權威的best practice styleguide
React + Flux
Angular很好解決了程序員在構建復雜系統時所面對的問題，另一個流行的工具是React，它是一個創(chuàng)建用戶界面的庫，你可以把它想象成MVC中的V。由于React只是一個庫，所以它會經常伴隨著一個框架Flux
Facebook設計React和Flux的目的是為了解決MVC本身的不足和其擴展問題。先看一下他們總所周知的介紹：Hacker Way: Rethinking Web App Development at Facebook，它重溫了Flux的歷史。
React和Flux的學習，先從React開始，React文檔是一個很好的入門教材。然后，這篇React.js Introduction For People Who Know Just Enough jQuery To Get By會幫助你扭轉jQuery思維模式。
一旦你擁有了React基礎，便可可以開始學習Flux，同樣的，官方文檔是一個很好的開端，繼而，你可以看下極好的React，這篇文章可以帶領你進入更深入的學習。
練習使用框架
你現在擁有JavaScript框架和架構的基礎知識，于是又到了練習的時候了。在后續(xù)兩個實驗中，專注于應用你學過的框架的概念。特別需要注意的是，你要讓你的代碼保持DRY原則，頭腦中能清晰的理解不同的概念，并能夠讓你的模塊僅完成單一的功能
實驗5
實驗5的課題是將一個用JavaScript實現的TodoMVC的app掰開，然后再用將其重寫。換句話說，這是一個沒有任何框架的實驗，但用到了MVC的原理，目的就是讓你更深入的理解MVC是如何工作的。
首先你看一下TodoMVC長什么樣子，然后你要做的是先創(chuàng)建一個新的本地工程，建立MVC的三個組件。你還需要拉取Github倉庫上的代碼，因為這是一個比較復雜的實驗，如果你仍然無法完成克隆這個項目，抑或沒有時間，沒有關系，直接使用你下載的Github代碼，不斷調試MVC的不同組件，直到你理解了組件之間是如何運作的。
實驗6
實驗6是一個應用MVC的很好練習，理解MVC是進入JavaScript框架的必經之路，實驗6會讓你跟著Scotch.io制作的指南，使用Angular建立一個Etsy頁面的克隆版。
Build an Etsy Clone with Angular and Stamplay教你使用Angular創(chuàng)建一個web應用、API接口，以及如何組織大型的項目。完成了這個指南，試著回答以下幾個問題：
- 什么是web應用？
- Angulars是如何應用MVC/MVVM模型的？
- 什么是API？它是用來做什么的？
- 你如何組織大型的代碼的？
- 把UI打散到不同的組件的好處是什么？
如果你想親手創(chuàng)建更多的Angular web應用，試一下Build a Real-Time Status Update App with AngularJS & Firebase。
實驗7
現在你已經適應了MVC，輪到Flux上場了，實驗7正是讓你使用React和Flux框架創(chuàng)建一個todo列表。全過程在這里：Facebook的Flux文檔，它會一步步教你如何使用React創(chuàng)建界面，以及Flux如何建立web應用。
一旦你全部完成，你可以進入更復雜的教程：如何使用React，Redux和Immutable.js創(chuàng)建一個Todo應用，并使用Flux和React建立一個微博應用
保持更新
和其他前端開發(fā)一樣，JavaScript的技術發(fā)展的很快，時刻保持更新這件事變得非常重要。
給出以下列表的網站，博客以及論壇，它們既有意思，又很有價值：
從例子中學習
最佳的學習方式是從例子中學習
風格指南
JavaScript風格指南是一組代碼規(guī)范，它會幫助你設計具有可讀性和可維護性高的代碼。
編碼基礎
我已經無法形容讀好代碼給我?guī)淼膸椭降子卸啻?，一旦當你想讀新的好代碼時，可以上Github上找
圓滿
文章的結束，你應該穩(wěn)固的掌握了JavaScript的基礎，并且知道如何應用于Web開發(fā)。記住，這篇文章只是你的一個線路圖，如果你想成為一個前端英雄，你還需要在項目中花更多的時間來適應這些概念，項目做得越多，你對他們也會越熱情，你學到的也越多。
這篇文章是兩部系列的第二部分，唯一遺漏的地方是Node，他是一個可以允許JavaScript運行在服務器上的框架，將來，也許我會在寫一篇文章介紹Node相關的服務端開發(fā)，以及NoSql數據庫
歡迎來Tweet上找我
作者：@Jonathan Z. White
譯者：jieniu
原文：From Zero to Front-end Hero (Part 2)
