[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。

繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在上半篇中介紹了HTML與CSS的基礎知識，在這裏就主要介紹JavaScript與各類各樣的前端框架。再安利一波筆者的個人前端之路

筆者一直以爲不斷變革的前端永遠充滿活力與激情，可是，哪有那麼多激情燃燒的歲月，不少時候會有一種深深的無力感。B狗的才學會某個東西發現又被拋棄了，就好像筆者才決定大規模使用React+Redux+Webpack，就看到了這個from-a-react-point-of-vue-comparing...。實際上，就包括React自己已經OverWhelming，對於初學者很不友好。而且各類各樣的最佳實踐、Boilerplate在某些意義上會反而提升學習門檻與曲線，對於這方面的討論筆者推薦幾個瞅瞅，固然，筆者自己也在思考，打腹稿中：

• javascript-fatigue

• state-of-the-union-js

我作到我已知的最好的，讓最佳實踐留給將來的我吧

如下是正文部分。

JavaScript Basics

做爲目前最流行的跨平臺語言之一，JavaScript幾乎出如今了全部的地方，可是千里之行始於足下，咱們仍是要先來理解JavaScript的一些基礎知識。

Language

在學習怎麼將JavaScript應用到Web開發以前，咱們仍是要看下JavaScript的基本語法。推薦閱讀Mozilla Developer Network的 Language basics crash course。本教程會導引學習譬如基本的變量、流程控制與函數等等語言基礎部分。

讀完了這個，你就能夠讀MDN的 JavaScript guide中的剩餘部分：

• 語法與類型

• 流程控制與異常處理

• 循環與迭代

• 函數

JavaScript Introduction,能夠參考裏面的Reference部分，有不少推薦的閱讀參考

一樣的，不要死記硬背，你能夠在你記不住的時候多看看，固然，最好的是能造成你本身的閱讀筆記或者知識體系框架，譬如這個。你應當專一於理解變量初始化、循環以及函數等等關鍵的知識點，譬如for-in、forEach、for-of的區別，this的N種綁定方法等。若是你實在以爲這貨太單調了，那也能直接跳過，之後發現啥東西不理解的時候再滾回來瞅一眼。在實踐中學習可能能讓你理解地更好。

讀書讀累了，那能夠看看視頻換個腦子，這個Codecademy提供的 JavaScript系列教程 不錯，能夠隨手看也頗有意思。另外一個，若是你還有時間，能夠看看 Eloquent JavaScript 中的相關章節來加深你的記憶。 Eloquent JavaScript 是個很是優秀的在線的免費的JavaScript學習工具書。

Interactivity

到這一步你應該已經對JavaScript這門語言自己的基礎知識有了瞭解，那麼下一步就是學會如何應用到Web項目開發中。你首先須要來瞅幾眼文檔對象模型 (DOM)來理解JavaScript是如何完成與網頁的交互的。文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，並定義了一種方式可使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言鏈接起來。若是要作進一步瞭解的話推薦閱讀CSSTricks出品的What is the DOM，它也提供了簡單而直接的對於DOM的介紹。

好像剛纔那段對DOM的介紹有點照本宣科，CSS Tricks裏是這麼說的，關於DOM與HTML的區別。可能你在HTML代碼中寫了個<table>元素，可是忘了寫<tbody>，不要緊，瀏覽器會自動幫你插入<tbody>到DOM中，你能夠利用JavaScript來控制該節點而且賦予樣式，儘管它從未出如今你的HTML中。

這裏提供了一個簡單的例子，經過JavaScript是如何改變某個DOM元素裏的內容來展現基本的JavaScript與DOM樹的交互，首先須要選擇到對應DOM節點

var container = document.getElementById(「container」);

而後使用該DOM節點的屬性來改變其內容

container.innerHTML = 'New Content!';

這只是一個簡單的例子，你還能夠用JavaScript DOM API幹更多的事情，你能夠閱讀如下的MDN的教程來進行了解, The Document Object Model.

• Events

• 使用DOM進行Web與XML開發示例

• 怎麼建立一個DOM樹

• DOM介紹

• 利用選擇器來定位DOM節點

老生常談了，不能捨本逐末，仍是要專一於理解概念而不是簡單地表達式使用，要在心中默問本身幾個問題：

• DOM是什麼鬼?

• 怎麼查詢元素?

• 怎麼進行事件監聽?

• 怎麼改變DOM節點的屬性?

對於常見的JavaScript與DOM之間的交互, 能夠參考PlainJS出品的 JavaScript Functions and Helpers 。這個站點會給你提供不少的例子，譬如 如何操做DOM元素樣式 或者 怎麼添加鍵盤事件響應等等。若是你但願再深刻一點，一樣推薦Eloquent JavaScript中的DOM介紹的章節。

Inspector

在瀏覽器中，咱們能夠用開發者工具來調試客戶端運行的JavaScript代碼，譬如Firefox的Firebug和Chrome的開發者工具，能夠幫你審視網頁源代碼，追蹤JavaScript的執行過程和結果，打印出調試語句，還能瞅瞅譬如網絡請求、Cookie等等資源。這個 tutorial 是關於如何使用Chrome的開發者工具，若是你是火狐的話，瞅瞅這個 tutorial。

Practicing the basics

上面聊完了基礎的語法和交互操做，可是對於不知道有多少個坑的JS而言不過滄海一粟，不過我把一些新的東西放到了最後一節介紹，這邊先放鬆放鬆，作點小實驗玩玩。

Experiment 1

實驗1裏讓咱們把目光投向 AirBnB, 打開你瀏覽器的 page inspector, 而後點擊 console tab。這樣你就能夠在頁面上執行一些JavaScript腳本了，你能夠嘗試着控制一些界面元素，改個字體樣式啥的。

我選用airbnb的網站做爲介紹是由於它的CSS類命名比較直接，而且沒有被編譯器混淆過，固然，你也能夠看看百度啊之類的調試。

• 選擇一個擁有惟一類名的header標籤，改變其文字內容

• 移除頁面上的隨機一個元素

• 改變任意元素的CSS屬性

• 將一塊區域的高度減少250px

• 改變一個組件，譬如panel的可見性

• 定義一個叫作 doSomething 的函數，讓它彈出「Hello world」，而且執行它

• 爲某個文本塊添加一個點擊響應事件

若是你在那邊卡住了，別忘了去看看JavaScript Functions and Helpers 指南，我在這邊也給一個小小的例子：

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

這個實驗的主要目的就是回顧下你學到的JavaScript的基本語法以及一些DOM操做的知識。

Experiment 2

第二個實驗使用 CodePen-JonathanZWhite編寫一個較大較複雜的JavaScript交互項目，會用到一些programmatic logic 。這個實驗的關注點會綜合你在前端攻略-從路人甲到英雄無敵中學到的關於HTML與CSS的知識，這邊有幾個參考項目：

• Periodic Table

• Mood Color Generator

• Calculator

• JavaScript Quiz

• Playable Canvas Asteroids

More JavaScript

看過了基礎知識，動手作了幾個小實驗，下面咱們會進入一些更有難度的概念的學習。這邊的列舉的概念可能之間並麼有什麼必然的練習，不過我仍是把它們放在了一塊兒是由於它們能有助於你通往專家的道路，而且也能有助於你理解下面關於框架部分的講解。

Language

實際上JavaScript並非一門淺薄的語言，雖然它只用了短短一週時間就建立出來了，它包含了不少高級的概念與用法（而且由於歷史版本問題存在着大量的Polyfill）。這裏是列舉出了常見的概念，一樣地 Eloquent JavaScript也攘括了這些點：

• 原型與繼承

• 做用域

• 閉包

• 迴環

• 事件冒泡

• Apply, call, and bind

• Callbacks and promises

• 變量與提高

• Currying

Imperative vs. Declarative（命令式VS聲明式）

就如同常見的兩種編程方式，JavaScript與DOM交互的方式也分爲命令式與聲明式。通常來講，聲明式編程關注於發生了啥，而命令式則同時關注與咋發生的。

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)
 })
}

上面這個小例子就是典型的命令式編程，咱們手動地查找到某個元素，而後將UI狀態存儲在DOM中，換言之，就是關注於如何達成某個目標。命令式編程的優點在於很直觀，不過缺點也很明顯，整個程序的健壯性不好，也不易於擴展。譬如若是某人把那個元素的類名從hero變成了villain，那麼事件監聽器就永遠不會被調用了。

聲明式編程能夠較好地解決這個問題，剛纔提到的比較麻煩的元素選擇這個動做能夠交託給框架或者庫區處理，這樣就能讓開發者專一於發生了啥，這裏推薦一波 The State Of JavaScript — A Shift From Imperative To Declarative 與 Three D’s of Web Development #1: Declarative vs. Imperative。本指南並無一上來先給你看Angular或者React的HelloWord，而是告訴你命令式的作法和聲明式的區別在哪，這樣你就能更好地理解爲啥咱們會須要框架。

響應式與聲明式也能夠看看筆者在個人前端之路裏面提到的從以DOM操做爲核心到數據流驅動的頁面，關注發生了啥本質上就是關注狀態與數據，而不是額外的操做。

Ajax

雖然已經有了不少關於Ajax的教程指南，仍是建議你閱讀下官方的Ajax 介紹。Ajax便是一個容許Web頁面經過JavaScript與服務端完成交互的技術，Ajax也是先後端分離的一個基石。

譬如，若是你要去提交一個表單，那麼就要先收集下輸入的內容而後經過HTTP請求發送到服務端。你在發Twitter的時候，就是Twitter客戶端發送HTTP請求到Twitter的服務器，而後根據服務端響應來修正頁面狀態。推薦閱讀下 What is Ajax來深刻理解Ajax，若是仍是以爲有些疑惑，那能夠看看 Explain it like i’m 5, what is Ajax，要是還不夠，那就回到eloquentjavascript chapter 關於HTTP的章節吧。

早期，筆者是習慣用jQuery的$.ajax來進行Ajax操做，不過如今已經慢慢統一到了標準的 Fetch，你能夠看看由 Dan Walsh寫的文章來多瞭解下Fetch，它涵蓋了Fetch的工做原理與基本的用法。由於Fetch在部分低版本瀏覽器上還不能使用，所以咱們會選擇一些Fetch polyfill ，文檔是 這裏。

jQuery

• 一些jQuery使用技巧

• 也須要你壓根用不到jQuery

到這裏，我們一直是用單純的JavaScript來進行節點操做，怪麻煩的說，並且在不一樣的瀏覽器裏還有寫不一樣的Polyfill。實際上，已經有了大量的DOM節點的操做庫來幫咱們簡化經常使用代碼，其中最著名的就是jQuery，一個當年前端程序猿的標配。要記住，jQuery是一個典型的命令式的操做庫，它編寫與前端井噴以前，在那個年代有着無可比擬的先進行。雖然今天，咱們應該用像Angular、React這樣的聲明式編程的框架來進行復雜UI界面的編寫，可是仍然是推薦學習下jQuery，畢竟還有大量的項目仍然是基於jQuery的。

jQuery官方提供了一個Learning Center，是不錯的基礎學習的教程，它會一步一步帶你學習重要的概念，譬如animations 與 event handling。若是你想要更多的學習資源，那麼能夠參考Codecademy的 jQuery course。

不過必定要記住，jQuery並非惟一的進行DOM操做的庫， PlainJS 和 You Might Not Need jQuery 也提供了基於本來的JavaScript代碼怎麼實現常見的jQuery中的操做。

ES5 vs. ES6

在現代的前端開發中，另外一個繞不過去的概念就是 ECMAScript。如今主要有兩個經常使用的JavaScript版本，分佈是ES5和ES6，它們呢都是JavaScript使用的ECMAScript標準。你能夠把它們看作不一樣版本的JavaScript，ES5是在2009年定稿，而後使用至今。而ES6, 也叫做ES2015，是一個新的標準，它提供了不少譬如常量, 類, 以及 模板字符串等等特性。ES6是兼容ES5的，不像Python3和Python2，而且不少ES6帶來的語法特性都是在ES5的封裝的基礎上，譬如ES6中的類是基於JavaScript prototypal inheritance的syntactical sugar。

這裏推薦一個不錯的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了這些，你也能夠看看ES5和ES6特性的詳細列表： ES6 Features以及 Github repository 。

More Practice

恭喜你，成功到達存檔點，你已經學了很多關於JavaScript的知識了，下面讓咱們來溫習一波。

Experiment 3

Experiment 3 着重於如何利用jQuery進行常見的DOM節點操做，本實驗中，咱們會以一種更加結構化的方式。我是選擇了Flipboard的主頁做爲範本，你能夠參考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。

Experiment 4

按照慣例，實驗4呢又把你學過的HTML和CSS的知識跟JavaScript的知識混雜到了一塊兒進行鍛鍊，這是一個關於鐘的實驗，各類各樣的鐘。在動手以前推薦你看看 Decoupling Your HTML, CSS, and JavaScript來了解下JavaScript混入的狀況下基本的CSS類名命名規範。一樣的，我也準備了一系列的CodePen來當作你的教材：

• Flat Clock

• jQuery Wall Clock

• Fancy Clock

• Retro Clock

• Simple JavaScript Clock

若是你要更多的例子，請在CodePen上搜索 clock 。你能夠選擇先寫基本的HTML與CSS樣式而後再加上JavaScript邏輯，也能夠先寫JavaScript邏輯代碼而後再放入到樣式中。你能夠選擇用jQuery，不過儘可能仍是用純粹的JavaScript代碼吧。

JavaScript Frameworks

小怪清完了，下面開始刷BOSS了，拿起你的劍吧勇士，美麗的公主就在前方。咱們在這一章節會開始介紹經常使用的JavaScript框架。咱們不提倡重複造輪子，可是必定要理解輪子而且能給它上上油或者換換螺絲釘，這些JavaScript框架能夠幫你更好地組織你的代碼。它們爲前端開發者提供了可複用的解決方案，就好像所謂的設計模式同樣，它能夠用來解決狀態管理、路由以及性能優化等等，正是由於有了這些框架，咱們才能更好地構建web apps。

貪多嚼不爛，我不打算介紹全部的JavaScript框架，不過仍是列個目錄下來，這些框架包括但不限於 Angular, React + Flux, Ember, Aurelia,Vue, 以及 Meteor。你並不須要學習全部的框架，選擇一個而後深刻，最合適本身的纔是最好的。

便如譯者在文首所說，咱們並不能盲目地追趕框架，而是要理解框架背後的思想與原則。另外一個在譯者本身的實踐中，會盡量的基於ES6進行抽象，這樣保證了即便換框架也能有很好地兼容於複用。

Architectural Patterns

在學習框架以前，首先要了解下經常使用的架構模式：

• model-view-controller

• model-view-viewmodel

• model–view–presenter

這些模式能夠用來建立清晰的多層應用關注分離 。關注分離是一個設計原則，便是講一個巨石型應用切分到不一樣的領域專一層，譬如前面咱們都是在HTML中保留應用狀態，而你可使用一個JavaScript對象，或者說是Model層來存儲應用狀態。若是你想要了解地更多，能夠先看下Chrome Developers裏對於MVC的講解，而後閱讀Understanding MVC And MVP (For JavaScript And Backbone Developers)。閱讀這篇文章的時候不要在乎有沒有學過Backbone，只要關注MVC與MVP比較的部分。 Addy Osman也寫了另外一篇關於MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。若是你想了解MVC的源起，能夠參考Martin Fowler的 GUI Architectures。最後，閱讀這篇JavaScript MV* Patterns， Learning JavaScript Design Patterns也是個很不錯的在線免費電子書。

Design Patterns

JavaScript的框架也並無重複造輪子，不少仍是基於已有的設計模式，你能夠認爲設計模式是在軟件開發中用於解決通用問題的可複用的方法。儘管理解設計模式並非學習一個框架的前提，不過我仍是建議你能夠先了解一些：

• Decorator

• Factory

• Singleton

• Revealing module

• Facade

• Observer

理解這些設計模式不只會讓你變成一個更好地設計師，也能有助於你更好地理解這些框架。

AngularJS

AngularJS 是一個 JavaScript MVC框架，不過有時候也是一個 MVVM框架。它由在2010年由Google進行維護而且迅速在社區颳起了一波浪潮。

Angular是一個典型的聲明式框架，這裏推薦一個閱讀，能夠幫你理解命令式編程到聲明式編程的轉變： How is AngularJS different from jQuery。若是你但願瞭解更多關於Angular的知識，能夠參考Angulardocumentation。還有一個叫作 Angular Cat 的漸進教程。 angular2-education 是一個由 Tim Jacobi.整理的完整的關於angular2的教程，另外，還有John Papa編寫的 最佳實踐指南 。

React + Flux

Angular幫助開發者解決了不少前端系統構建中遇到的問題，不過Angular 1存在着極大的性能問題。今年纔出的Angular 2也是組件化思惟，不過太過龐大。另外一個經常使用的小而美的工具就是 React，專一於用戶交互的構建。React能夠認爲是MVC層中的View層，React只是一個Library，一般與 Flux或者Redux一塊兒結合起來使用。

Facebook最先設計React與Flux是爲了解決MVC中的一些缺陷與擴展問題，能夠參考著名的Hacker Way: Rethinking Web App Development at Facebook演講，這裏介紹了Flux的起源。首先，咱們來學習React，推薦是直接看React 官方文檔，而後看看React.js Introduction For People Who Know Just Enough jQuery To Get By 來幫你從jQuery思惟轉移到React思惟。

能夠參照譯者的React Introduction來獲取更多關於React參考資料的東東

在你對React有了基本的瞭解以後，下面就能夠開始學習Flux了，一樣的首先推薦官方Flux文檔。而後你能夠看看Awesome React, 這裏包含了不少你能夠慢慢咀嚼的內容。

Practicing with Frameworks

又到了實踐環節了，如今你已經對於JavaScript框架與架構模式有了基本的瞭解，是時候帶一波節奏了。在這兩個實驗中，注意體會架構設計的理念，首先要保證 DRY, 而後有一個 清晰的分層概念, 最後要注意 單一職責原則.

Experiment 5

實驗5是不用框架重構著名的TodoMVC，換言之，就是用最基礎的JavaScript代碼來實現一個TodoMVC。本實驗的目的就是爲了向你展現在沒有框架介入的狀況下怎麼構建一個完整的MVC應用

你能夠參考 TodoMVC，第一步就是建立一個新的本地項目而後創建三個基本的組件，你能夠參考Github repository這裏的完整代碼。若是你以爲如今的本身能力還不足以Hold住整個項目，表擔憂，先把它們下載下來，而後慢慢實踐。

Experiment 6

Experiment 6 就是跟着Scotch.io的教程來實現一個下面這樣的站點：

Build an Etsy Clone with Angular and Stamplay 會教你怎麼基於Angular來構建一個網站，提供APIs而且在一個大型的項目中進行架構組織。學完了這些以後，你要能理解如下這些問題：

• 啥是web app?

• 怎麼用Angular實踐 MVC/MVVM?

• API是啥，腫麼用?

• 怎麼組織與管理一個大型的CodeBase?

• 將一個UI切分爲聲明式組件的好處在哪?

若是這個教程還不夠，那還能夠看看Build a Real-Time Status Update App with AngularJS & Firebase。

Experiment 7

第7個實驗是將React與Flux綜合使用，即利用React來構建一個TODOMVC。你能夠參考Facebook’s Flux documentation site這個教程，它會教你一步一步地從零開始構建界面而後將Flux應用到整個Web項目中。經過了第一關，就能夠移步到 怎麼利用React、Redux與Immutable.js構建一個TodoMVC 以及 利用Flux與React構建一個微博客。

Stay current

就像前端同樣，JavaScript也永遠不會停下前進的步伐。

下面列舉了一系列博客，多讀讀，可以隨時瞭解最新的發展與消息：

• Smashing Magazine

• JavaScript Weekly

• Ng Weekly

• Reddit JavaScript

• JavaScript Jabber

Learn by example

Styleguides

• AirBnB JavaScript Styleguide

• Principles of Writing Consistent, Idiomatic JavaScript

• Node Styleguide

• MDN Coding Style

Codebases

• Lodash

• Underscore

• Babel

• Ghost

• NodeBB

• KeystoneJS

Further Reading

• web-frontend-practice-handbook