【譯】前端練級攻略

譯者：前端小智

原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t…

你知道的越多，你不知道的越多

點贊再看，養成習慣

本文 GitHub：github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

我記得我剛開始學習前端開發的時候。我看到了不少文章及資料，被學習的資料壓得喘不過氣來，甚至不知道從哪裏開始。

本指南列出前端學習路線，並提供了平時收藏的一些有效的資源。

爲了使這本指南易於理解，我把它分紅了兩部分。第一部分介紹瞭如何使用 HTML 和 CSS開發接口。第2部分將介紹 Javascript、框架和設計模式。

HTML 和 CSS 基礎

在前端開發中，一切都從 HTM 和 CSS 開始。HTML 和 CSS 控制你在 Web 頁面上看到的內容。HTML 表示內容，而 CSS 處理樣式和佈局。

首先，閱讀 Mozilla Developer Network(MDN)的 HTML 和 CSS 教程。MDN 逐章解釋了 HTML和 CSS 重要概念。此外，每一個章節只有一頁長，交互演示連接到 CodePen 和 JSFiddle。

在完成這些教程以後，看看 CodeAcademy 的 Make a Website 課程。本教程只須要幾個小時就能夠完成，對於使用 HTML 和 CSS 構建網站是一個很好的入門教程。若是wq 想了解更多， Building web forms 是 CodeAcademy 提供的另外一篇教程，該教程將指導你構建和樣式化 web 表單。

要練習 CSS，能夠試試 CSS Diner。這是一個有趣的 CSS 挑戰遊戲。HTM L和CSS 的另外一個重要方面是佈局。LearnLayout 是一個交互式教程，向你展現如何使用 HTML 和 CSS 建立佈局。

另外，瞭解如何使用 CSS Tricks 的 Google 字體 的 API 基礎知識。 排版是界面的基本構建塊。 若是你有時間，我強烈建議你閱讀這本免費的在線書籍，Donny Truong 的 Professional Web Typography 它教你做爲前端開發人員須要瞭解的關於排版的一切。

經過這些資源，不要太擔憂記憶的問題。相反，重點是理解 HTML 和 CSS 如何協同工做。

練習 HTML 和 CSS 基礎

如今你已經對 HTML 和 CSS 有了基本的瞭解，讓咱們來找點樂趣。在本節中，有兩個實踐旨在爲你提供構建網站和界面的實踐。我用「實踐」這個詞是由於在實踐中，你從失敗中學到的東西和你從成功中學到的同樣多。

實踐 1

在咱們的第一個實踐中，咱們將使用 CodePen。CodePen 是一個前端平臺，你能夠在這裏編寫 HTML 和 CSS 代碼，而沒必要在本地存儲文件。它還提供了實時預覽，能夠在保存代碼時當即更新。

經過使用 CodePen，你能夠一石二鳥。一方面，你要練習 HTML 和 CSS。另外一方面，你建立一個基本的進度組合。咱們還將使用 Dribbble，這是一個充滿設計靈感的網站。

在 Dribbble 找到一個簡單到能夠在幾個小時內編寫代碼的設計。我選擇了一些設計讓你開始:1、2、3、4 和 5。我選擇了手機爲先的網頁設計，由於它們比桌面網頁設計要簡單。不過，也能夠自由選擇桌面設計。

在你決定了一個設計以後，繼續嘗試用 CodePen 編寫它。若是遇到困難，請記住StackOverflow 是你的朋友。另外一個有用的實踐是訪問像 Medium、AirBnB和 Dropbox 這樣的網站，使用 inspector 工具查看它們是如何實現不一樣的佈局和風格的。另外，看看 pens on CodePen。我挑選了一些好的例子:

• Twitter小部件
• Article News Card
• Simple Flat Menu

若是你出來的與原設計不一樣，請不要氣餒。 繼續練習不一樣的設計，你會發現每次都有進步。

若是你沒有設計背景，極可能你的設計眼光不夠成熟。具備良好設計眼光的前端開發人員將可以識別好的設計並完美地複製它們。幾周前，我寫了一篇關於如何培養你的設計眼光的文章。

實踐 2

但願第一個實踐讓你對編寫 HTML 和 CSS 有必定的信心。 對於實踐 2，咱們將看一些網站，而後編寫一些組件。

一些網站使用 CSS框架或 混淆它們的 CSS 類名，使你很難閱讀它們的源代碼。這就是爲何我選擇了幾個設計良好的網站，易於閱讀源代碼。

• AirBnB: 嘗試複製他們的頁腳
• PayPa:試着複製他們的導航欄l
• Invision :嘗試複製頁面底部的註冊部分
• Stripe: 嘗試複製他們的支付部分

一樣，實踐2的重點不是從新建立整個頁面。選擇幾個關鍵組件，如導航欄或英雄部分進行編碼。我在網站列表旁邊提供了一個建議，可是請隨意選擇其餘組件。

HTML 和 CSS 最佳實踐

到目前爲止，你已經學習了 HTML 和 CSS 的基礎知識。下一步是學習最佳實踐。最佳實踐是一組提升代碼質量的非正式規則。

語義標記

HTML 和 CSS 的最佳實踐之一是編寫語義標記。好的 web 語義意味着使用適當的 HTML 標籤和有意義的 CSS 類名來表示結構的意義。

例如，h1 標籤告訴咱們它包裝的文本是一個重要的標題。 另外一個例子是footer標籤 ，它告訴咱們元素屬於頁面底部。 有關進一步，請閱讀 CSSTricks 的 正確的 HTML5 語義 和 什麼是語義類名的構成要素。

CSS 命名規範

CS S的下一個重要的最佳實踐是正確的命名規範。良好的命名規範，如語義標籤，傳達了意義，並有助於使咱們的代碼可預測、可讀和可維護。你能夠在這篇 OOCSS、ACSS、BEM、SMACSS：它們是什麼?我應該用什麼? 中瞭解到不一樣的命名規範。

通常來講，我建議你嘗試一些簡單的命名規範，這些規範對你來講是直觀的。隨着時間的推移，你會發現最適合你的方法。要了解像 Medium 這樣的公司是如何利用像 BEM 這樣的命名約定的，請閱讀 Medium’s CSS is actually pretty f***ing good.。在這篇文章中，你還會了解到，提出一組有效的 CSS 約定是一個迭代過程。

CSS重置

從頁邊距到行高，每一個瀏覽器都有一些小的樣式不一致。所以，須要重置 CSS。MeyerWeb 是一個受歡迎的重置。若是你想深刻了解，能夠閱讀 Create Your Simple Reset.css File。

跨瀏覽器支持

跨瀏覽器支持意味着你的代碼支持最新的瀏覽器。像 transition 這樣的 CSS 屬性須要廠商前綴才能在不一樣的瀏覽器中正常工做。在本文中，我能夠閱讀更多關於供應商前綴的信息，即 CSS供應商前綴。最重要的是，你應該跨多個瀏覽器(包括 Chrome、Firefox 和 Safari )測試你的網站。

CSS 預處理器與 CSS 後處理器

自20世紀90年代CSS引入以來，CSS走過了漫長的道路。因爲UI系統變得愈來愈複雜，人們提出了稱爲預處理器和後處理器的工具來管理複雜性。

CS S預處理程序是 CSS 語言擴展，它添加了一些額外的功能，好比變量、混合和繼承。兩個主要的CSS預處理程序是 Sass 和 Less。2016 年，Sass的使用範圍更加普遍。Bootstrap是 一種流行的響應式 CSS 框架，它也正在從 Less 轉換到 Sass。並且，當大多數人談論 Sass時，他們其實是在談論 SCSS。

CSS 後處理器在由預處理器手寫或編譯後對 CSS 應用更改。 例如，PostCSS 等一些後處理器具備自動添加瀏覽器供應商前綴的插件。

當您第一次得知有 CSS預處理器和後處理器時，你頗有可能在任何地方已經使用它們。 可是，從簡單開始，僅在必要時添加變量和 mixin 等擴展。 我以前建議的文章，Medium’s CSS is actually pretty f***ing good，也涵蓋了預處理器相關的知識。

網格系統和響應能力

網格系統是CSS結構，它容許你水平和垂直地堆疊元素。

Bootstrap，Skeleton 和 Foundation 等網格框架提供了管理佈局中行和列的樣式表。 雖然網格框架頗有用，但瞭解網格的工做原理也很重要。 理解CSS網格系統 和 Don’t Overthink Grids 這兩篇文章是很好的概述。

網格系統的主要目的之一是爲你的網站添加響應性。響應性意味着你的網站根據窗口寬度調整大小。不少時候，響應是經過使用 CSS 媒體查詢實現的，CSS 規則只適用於特定的屏幕寬度。

關於媒體查詢知識及擴展能夠看看如下幾篇文章：

• Intro to Media Queries
• mobile-first
• An Introduction to Mobile-First Media Queries

實踐 HTML 和 CSS 最佳實踐

如今你已經掌握了最佳實踐，讓咱們進行測試。下面兩個實踐的目標是練習編寫乾淨的代碼，並觀察最佳實踐對可讀性和可維護性的長期影響。

實踐 3

對於實踐 3，選擇你以前作過的項目，並使用你在這過程所學到的知識來重構你的代碼。重構意味着編寫代碼，使代碼更容易閱讀，更簡單。

可以有效地重構代碼是前端開發人員的一項重要技能。 編寫高質量代碼是一個迭代過程。 CSS體系結構：重構你的 CSS 是重構代碼的入門指南。

在重構代碼時，有幾件事須要問問本身。

* 你的取的類名是否有歧義? 6個月後，你還能理解你的類名是什麼意思嗎?

* 你的 HTML 和 CSS 是語義化的嗎?當你瀏覽你的代碼時，你能快速辨別結構和關係的含義嗎?

• 你是否在代碼中反覆使用相同的十六進制顏色代碼? 將它重構爲一個 Sass變量 是否更有意義?

• 你的代碼在 Safari 和 Chrome 上運行得同樣的嗎?

• 你是否能夠用相似於 Skeleton 的網格系統替換一些佈局代碼?

• 你常用 !important 標誌嗎?你怎麼解決這個問題?

實踐 4

最後一個實驗把你學到的關於最佳實踐的知識運用起來。然而，最佳實踐的效果一般不會變得明顯，直到你將它們應用到一個更大的項目中。

在最後一個實踐中，爲本身創建一個做品集網站。做爲前端開發者，你的做品集網站是你最重要的數字資產之一。做品集是一個展現你做品的網站。更重要的是，它是一個持續的記錄，幫助你跟蹤你的進步和發展。因此即便你只有一兩件事要展現，也要展現出來。

首先，跟隨阿德漢姆·達納韋的文章 《設計和開發做品集網站站的簡單工做流程》

若是你的第一個做品集網站迭代並不完美，那也不要緊。做品集網站須要經歷許多迭代。還有，重要的是你要用本身的技能來建造它。

與時俱進

雖然 HTML 和 CSS 不會很快過期，可是跟上前端環境的發展是很重要的。

下面是一個網站、博客和論壇的列表，這些網站、博客和論壇閱讀起來既有趣且信息豐富。

• CSSTricks
• Smashing Magazine
• Designer News
• Nettuts+
• CSS Wizard

經過例子學習

最後，最好的學習方法是以身做則。這裏有一套樣式指南和編碼規範，將教你如何成爲一個更有效的前端。

樣式指南

Web 樣式指南是能夠在整個網站中重用的 CSS 組件和模式的集合。從這些樣式指南中須要注意的關鍵問題是，基於組件的 HTML 和 CSS 方法如何容許重用代碼來保持代碼的清爽(DRY)。

• Mapbox
• LonelyPlanet
• SalesForce
• MailChimp

編碼規範

編碼規範讓代碼易讀且可維護。其中一些連接(如 CSS Guidelines)是編寫更好的 HTML 和 CSS 的指南，而其餘連接(如 Github internal CSS toolkit and Guidelines)是高質量代碼的例子。

• CSS Guidelines
• Github internal CSS toolkit and guidelines
• AirBnB’s CSS Styleguide

小結

但願在本文結束時，你已經熟悉 HTML 和 CSS，並掌握了一些項目。 學習前端的最佳方式是創建項目和實踐。 請記住，每一個前端開發人員都必須從某個地方開始。 從今天開始比明天開始更好。

本文是兩部分系列中的第一部分。 第二篇文章介紹瞭如何使用 Javascript 和 Javascript庫/框架添加交互性，共勉，同進步。

JavaScript基礎知識

JavaScript 是一種跨平臺的編程語言，如今幾乎能夠用於任何事情。

語言

在學習如何將JavaScript應用到web以前，首先要了解該語言自己。首先，閱讀 Mozilla Developer Network的語言基礎速成課程。本教程將教你基本的語言結構，如變量、條件和函數。

而後，閱讀 MDN 的 JavaScript 指南中的如下部分:

• Grammar and types (語法和類型)
• Control flow and error handling (控制流程和錯誤處理)
• Loops and iterations (循環和迭代)
• Functions(函數)

不要太擔憂記住特定的語法，你能夠隨時查一下文檔。相反，應該專一於理解重要的概念，好比變量實例化、循環和函數。若是知識密度難度太大，也沒關，先過一篇，你把這些概念付諸實踐，當你回過頭在來看，可能會理解起來會更加清晰。

基於文檔的學習可能會過於單調，能夠看看 Codecademy 的 JavaScript課程，這課程是理論與實踐相結合的，相對會有樂趣一。 此外，若是你有時間，請參閱上面列出的每一個概念，閱讀 Eloquent JavaScript中的相應章節以增強你的學習。 Eloquent JavaScript 是一本很棒的免費在線書籍，每一個有抱負的前端開發人員都應該閱讀。

交互性

如今你已經基本瞭解了 JavaScript 的語法，下一步就是將它應用到 Web上。 要了解 JavaScript如 何與網站交互，首先你必須瞭解 文檔對象模型（DOM）。

DOM 是 HTML 文檔的一種表示結構。它是一個樹形結構，由對應於 HTML 節點的 JavaScript 對象組成。要進一步瞭解DOM，請閱讀 CSSTricks 的 《什麼是DOM》。它提供了對 DOM 的簡單而直接的解釋。

JavaScript 與 DOM 交互以更改和更新它。下面是一個例子，咱們選擇一個 HTML 元素並更改它的內容

var container = document.getElementById(「container」); 
container.innerHTML = 'New Content!';
複製代碼

別擔憂，那只是一個簡單的例子。使用 JavaScript DOM 操做，你能夠作更多的事情。要了解有關如何使用 JavaScript 與 DO M交互的更多信息，請閱讀 MDN 的「文檔對象模型」一節中的如下指南。

• 事件及DOM
• Examples of web and XML development using the DOM
• 如何創建 DOM 樹
• DOM概述
• 使用選擇器定位DOM元素

再次強調一下，重點是要先理解概念而不是語法，但願可以回答如下問題:

• DOM 是什麼?
• 如何查詢元素
• 如何添加事件監聽？
• 如何更改 DOM 節點屬性？

有關常見的 JavaScript DOM 交互的列表，請查看 PlainJS 的 JavaScript 函數和助手。該網站提供了一些例子，說明如何在 HTML 元素上設置樣式和附加鍵盤事件監聽器。若是你想深刻挖掘，你能夠隨時閱讀 Eloquent 講的 JavaScript 中關於DOM的部分。

檢查

要調試瀏覽器中的JavaScript，咱們使用瀏覽器內置的開發人員工具。 大多數瀏覽器都提供了 inspector 面板，可讓你查看網頁的來源。 你能夠在執行時跟蹤 JavaScript，將調試語句打印到控制檯，以及查看網絡請求和資源等內容。

裏有一個關於使用 Chrome 開發工具的教程。若是你使用的 Firefox，能夠查看本教程。

實踐基礎

在這一點上，關於JavaScript還有不少東西須要學習。然而，最後一節包含了許多新信息。我想咱們該休息一下，作幾個實踐了。它們有助於鞏固你剛剛學到的一些概念。

實踐 1

對於實踐1，轉到 AirBnB，打開瀏覽器的頁面檢查器，而後單擊控制檯選項卡。在這裏，你能夠在頁面上執行JavaScript。咱們要作的是經過操縱頁面上的一些元素來得到一些樂趣。看看你是否能夠完成如下全部的 DOM 操做。

• 選擇具備惟一類名的標題標籤並更改文本

• 選擇頁面上的任何元素並將其刪除

• 選擇任意元素並更改其CSS屬性之一

* 選擇一個特定的區域標籤，並向下移動250像素

* 選擇任何組件，如面板，並調整其透明度

• 定義一個名爲 doS​​omething 的函數，該函數j裏定義一下alert (「Hello world」) 而後執行它

• 選擇一個特定的段落標記，向其中註冊一個 click 事件，並在每次事件被觸發時運行 doSomething

若是您遇到困難，請參考 JavaScript 函數和幫助程序指南。這些任務大部分都是基於它。如下是如何完成第一個要點的示例:

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

這個實踐的主要目的是學習一些關於 JavaScript 和 DOM 操做的知識，並看到它們的實際應用。

實踐 2

使用 CodePen，編寫一個使用DOM操做並須要一些編程邏輯來運行的基礎JavaScript 實踐。這個實踐的重點是把你在《前端練級攻略》第 1 部分中學到的一些東西和 JavaScript結合起來。這裏有幾個能夠做爲啓發的參考例子。

• Mood Color Generator
• 計算器
• JavaScript 測試
• Playable Canvas Asteroids

更多的 JavaScript

如今你已經瞭解了一些 JavaScript並進行了一些實踐，咱們將繼續學習一些更高級的概念。下面的概念並不直接相關。我將它們分組在本節中，由於它們對於理解如何構建更復雜的前端系統是必要的。一旦你進入框架部分，你將更好地理解並使用它們。

語言

當你使用JavaScript進行更多工做時，你將遇到一些更高級別的概念。 如下其中一些概念的列表。 若是有時間，仔細閱讀每個要點 此外，若是你想補充學習其它內容，Eloquent JavaScript 涵蓋了大部份內容。

• 繼承與原型鏈
• 做用域
• 事件輪詢
• 事件冒泡
• Apply, call, 和 bind
• 回調函數和 promise
• 變量和函數的提高
• 柯里化

命令式和聲明

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 中。換句話說，專一於如何實現某件事。這段代碼最大的問題是它很脆弱。若是處理代碼的人將 HTML中 的類名從 hero 更改成villain，事件偵聽器將再也不觸發，由於 DOM 中沒有 hero 類。

聲明式編程解決了這個問題。你沒必要選擇元素，而是將其留給您正在使用的框架或庫。這讓你專一於作什麼而不是如何作。要了解更多信息，請查看 JavaScript的狀態——從命令式轉換到聲明式，以及 Web開發:聲明式vs.命令式。

Ajax

在這些文章和教程中，你可能已經屢次看到 Ajax 這個術語。Ajax 是一種容許 web 頁面使用 JavaScript 與服務器交互的技術

例如，當你在網站上提交表單時，它收集你的輸入併發出 HTTP 請求，將數據發送到服務器。當你在Twitter 上發佈一條 tweet 時，你的 witter 客戶機向 Twitter 的服務器 API 發出 HTTP 請求，並使用服務器響應更新頁面。

有關 Ajax 的閱讀，請查看什麼是Ajax。若是你仍然沒有徹底理解 AJAX 的概念，請看看 Explain it like i’m 5, what is Ajax。若是這些還不夠，你還能夠閱讀關於 HTTP 的JavaScript 章節。

今天，HTTP 請求的瀏覽器標準是 Fetch。 你能夠在 Dan Walsh 的這篇文章中閱讀有關 Fetch 的更多信息。 它介紹了Fetch 的工做原理以及如何使用它。 你還能夠在此處找到帶文檔的 Fetch polyfill。

jQuery

到目前爲止，你一直在使用 JavaScript 進行 DOM 操做。事實上，有不少 DOM 操做庫提供api 來簡化你編寫的代碼。

最流行的 DOM 操做庫之一是 jQuery。請記住，jQuery 是一個命令式庫。它是在前端系統像今天這樣複雜以前編寫的。現在，管理複雜 UI 是聲明性框架和庫，如 Vue、Angular 和 React。可是，我仍然建議你學習jQuery，由於在你的前端職業生涯中極可能會遇到它。

要學習j Query 的基礎知識，請查看 jQuery學習中心。它一步一步地經過一些重要的概念，好比動畫和事件處理。若是你想要更多的動手教程，能夠看看 Codecademy 的 jQuery課程。

ES5 vs. ES6

理解 JavaScript 的另外一個重要概念是 ECMAScrip t以及它與 JavaScript 的關係。今天，你日常看到是兩種主要的 JavaScript 風格:ES5 和 ES6。ES5 和 ES6 是 JavaScript 使用的 ECMAScript 標準。你能夠將它們看做JavaScript的版本。ES5 的最終草案是在2009年完成的，到目前爲止你一直在使用它。

ES6，也稱爲 ES2015，是一個新標準，它爲JavaScript帶來了新的語言結構，好比常量、類和模板字符串。值得注意的是，ES6 帶來了新的語言特性，但仍然使用 ES5 從語義上定義它們。例如，ES6 中的類只是JavaScript原型繼承的語法糖。

瞭解 ES5和 ES6 是很是重要的，由於今天你會看到使用這兩種方法的應用程序。 ES5, ES6, ES2016, ES.Next:下一步:JavaScript版本控制是怎麼回事 這是一篇很好介紹了 ES6 相關的知識， Dan Wahlin的 ES6入門-下一版本的JavaScript正在發生什麼。以後，你能夠在 ES6 特性中看到從ES5 到 ES6 的完整變化列表。若是你想要更多，請查看這個包含 ES6 特性的Github存儲庫。

更多的練習

若是你已經到了這一步，恭喜你本身。你已經瞭解了不少JavaScript。讓咱們把你學到的一些東西付諸實踐。

練習 3

練習3 將你所學的 HTML 和 CSS 知識與 JavaScript 入門課程結合起來。在這個實驗中，你將建立本身設計的時鐘，並使其與 JavaScript 交互。在開始以前，我建議閱讀 解耦HTML、CSS和JavaScript的教程，以瞭解在混合使用 JavaScript 時的基本 CSS 類命名約定。我還在 CodePen上準備了一份筆的清單，你能夠做爲此次練習的參考。有關更多示例，請在 CodePen 上搜索clock。

• Flat Clock
• jQuery Wall Clock
• Fancy Clock
• Retro Clock
• Simple JavaScript Clock

你能夠用兩種方法作這個實驗。你能夠先用 HTML 和 CSS 設計和建立佈局，而後用 JavaScript 增長交互性。或者你能夠先編寫J avaScript 邏輯，而後再進入佈局。此外，你可使用jQuery，但也能夠隨意使用純 JavaScript。

JavaScript框架

掌握了JavaScript的基礎知識以後，是時候學習 JavaScript 框架了。框架是 JavaScript 庫，能夠幫助你構造和組織代碼。JavaScript 框架爲開發人員提供了複雜前端問題的可重複解決方案，好比狀態管理、路由和性能優化。它們一般用於構建web應用程序。

我不會講解每一個JavaScript框架，這裏有幾個框架的快速預覽:Angular、React + Flux、Ember、Aurelia、Vue和Meteor。你沒必要學習每一個框架。挑一個，好好學習。不要追逐框架，相反，要理解框架所基於的底層編程哲學和原則。

架構模式

在查看框架以前，理解框架傾向於使用的一些架構模式是很重要的:MVC(Model–view–controller)、MVVM(Model–view–viewmodel)v和vMVP(Model–view–presenter)。這些模式被設計成在應用層之間建立清晰的關注點分離。

關注點分離是一種設計原則，主要思想是將應用程序拆分爲不一樣的域特定層。 例如，你可使用JavaScript 對象（一般稱爲模型）來存儲狀態，而不是讓 HTML 保持應用程序狀態。

要了解更多關於這些模式的信息，請先閱讀 Chrome Developers 的 MVC。以後，閱讀理解 MVC 和MVP(面向JavaScript和主幹開發人員)。在那篇文章中，不要擔憂學不會，看不懂，只需理解 MVC和 MVP 的部分概念便可。

Addy Osman 還寫了關於 MVVM 的 理解 MVVM 的JavaScript開發人員指南。要了解 MVC 的起源及其產生的緣由，請閱讀 Martin Fowler 關於GUI體系結構的文章。最後，閱讀 JavaScript MV* Patterns一節，學習 JavaScript 設計模式。學習JavaScript設計模式是一本很棒的免費在線書籍。

設計模式

JavaScript 框架不會從新發明輪子。它們中的大多數依賴於設計模式。你能夠將設計模式視爲解決軟件開發中常見問題的通用模板。

雖然理解 JavaScript 設計模式並非學習框架的先決條件，但我建議在有時間的時候能夠看看如下幾種設計模式。

• 裝飾器模式
• 工廠模式
• 單例模式
• 揭示模式
• 觀察者模式

理解並可以實現其中的一些設計模式不只會使你成爲更好的工程師，並且還會幫助你理解一些框架的底層功能。

AngularJS

AngularJS 是一個JavaScript MVC 框架，有時也是 MVVM 框架。它由谷歌維護，並在2010年首次發佈時席捲了 JavaScript 社區。

Angular 是一個聲明性框架。幫助我理解如何從命令式編程過渡到聲明式JavaScript編程的最有幫助的文章之一是在StackOverflow上的 AngularJS 與 jQuery有何不一樣。

若是你想了解更多關於 Angular 的知識，請查看 Angular文檔。他們還提供了一個名爲 Angular Cat 的教程，可讓你立刻投入到編程中去。Tim Jacobi 在 Github知識庫中提供了一個更完整的 Angular 學習指南。此外，看看約翰·帕帕寫的這本權威的最佳實踐風格指南。

React + Flux

Angular 解決了開發人員在構建複雜的前端系統時所面臨的許多問題。另外一個流行的工具是 React，它是一個用於構建用戶界面的庫。你能夠把它想象成 MVC 中的 V。由於 React 只是一個庫，因此它一般使用一個稱爲 Flux 的架構。

Facebook設計React和Flux是爲了解決MVC的一些缺點及其在規模上的問題。看看他們著名的演示 黑客方式:從新思考Facebook的Web應用程序開發。它超過了Flux，它起源於此。

要開始學習 React 和 Flux，首先要學習 React。一個好的入門讀物是 React文檔。在那以後，看看 React.js Introduction For People Who Know Just Enough jQuery To Get By ，幫助你 從jQuery 的思惟模式過渡過來。

一旦你對 React 有了基本的瞭解，開始學習 Flux。一個好的起點是官方的Flux文檔。在那以後，看看 Awesome React，這是一個精選的連接列表，能夠幫助你在學習上更進一步。

練習與框架

如今你已經掌握了 JavaScript 框架和架構模式的一些基本知識，如今是時候將它付諸實踐了。 在這兩個練習中，重點是應用你學到的架構概念。 特別是，保持您的代碼 DRY，明確分離關注點，並遵照單一責任原則。

練習 4

練習 5 是使用不依賴框架的 JavaScript 分解和重構 Todo MVC 應用程序。這個練習的目的是向你展現 MVC 如何在不混合框架特定語法的狀況下工做。

首先，在TodoMVC上查看最終結果。第一步是在本地建立一個新項目，並首先創建 MVC 的三個組件。因爲這是一個複雜的實驗，請參考 Github 存儲庫中的完整源代碼。若是你不能徹底複製這個項目或者沒有時間，也不要緊。下載 repo 代碼並嘗試使用不一樣的 MVC 組件，直到你理解它們之間的關係。

練習 5

練習 5 是應用 MVC 的一個很好的練習，理解 MVC 是學習 JavaScript 框架的重要一步。 練習 5 是按照 Scotch.io的教程來構建一個帶有 Angular 的 Etsy 克隆。

使用Angular構建一個Etsy克隆，Stamplay 將教你如何使用 Angular 構建一個 web 應用程序，如何使用 api 構建接口，以及如何構造大型項目。完成本教程後，可以回答如下問題。

• 什麼是 web 應用程序?
• MVC/MVVM 如何應用於 Angular？
• 什麼是API，它作什麼
• 如何組織和構造大型代碼庫
• 將 UI 分解爲指令組件有什麼好處？

若是你想嘗試構建更多 Angular web 應用程序，能夠嘗試使用 AngularJS & Firebase構建一個實時狀態更新應用程序。

持續關注時事

就像前端的其餘部分同樣，JavaScript的發展很快，保持持續關注是很重要的。

下面是一個網站、博客和論壇的列表，這些網站、博客和論壇閱讀起來既有趣又信息豐富。

• Smashing Magazine
• JavaScript Weekly
• Reddit JavaScript
• JavaScript Jabber

經過例子學習

一如既往，最好的學習方法是以身做則。

樣式指南

JavaScript樣式指南是一組編碼規範，旨在幫助保持代碼的可讀性和可維護性。

• AirBnB JavaScript Styleguide
• Principles of Writing Consistent, Idiomatic JavaScript
• Node Styleguide
• MDN Coding Style

代碼庫

我沒法強調閱讀好的代碼是多麼有幫助，瞭解如何在獲取新內容時搜索Github的相關存儲庫。

• Lodash
• Underscore
• Babel
• Ghost
• NodeBB
• KeystoneJS

總結

在本指南結束時，您應該已經緊緊掌握了 JavaScript 的基本原理以及如何將它們應用到網絡上。請記住，本指南爲你提供了一個整體路線圖。若是你精通前端，花時間在項目上應用這些概念是很重要的。你作的項目越多，對它們越有熱情，你會學到更多。

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。

每次整理文章，通常都到2點才睡覺，一週4次左右，挺苦的，還望支持，給點鼓勵