摘要：是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學(xué)到的一些東西和結(jié)合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。

本文是 前端練級攻略 第二部分，第一部分請看下面：

前端練級攻略(第一部分)

在第二部分，我們將重點學(xué)習(xí) JavaScript 作為一種獨立的語言，如何向界面添加交互性，JavaScript 設(shè)計和架構(gòu)模式，以及如何構(gòu)建網(wǎng)絡(luò)應(yīng)用程序。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

就像 HTML 和 CSS一樣，有大量的 JavaScript教程。然而，特別是對于一個新手來說，很難弄清楚使用什么樣的教程以及以什么樣的順序來學(xué)習(xí)它們。本系列的主要目標是為你提供一個路線圖，幫助你導(dǎo)航學(xué)習(xí)成為前端開發(fā)者。

JavaScript 是一種跨平臺的編程語言，現(xiàn)在幾乎可以用于任何事情。

在學(xué)習(xí)如何將JavaScript應(yīng)用到web之前，首先要了解該語言本身。首先，閱讀 Mozilla Developer Network的語言基礎(chǔ)速成課程。本教程將教你基本的語言結(jié)構(gòu)，如變量、條件和函數(shù)。

然后，閱讀 MDN 的 JavaScript 指南中的以下部分:

Grammar and types (語法和類型)

Control flow and error handling (控制流程和錯誤處理)

Loops and iterations (循環(huán)和迭代)

Functions(函數(shù))

不要太擔(dān)心記住特定的語法，你可以隨時查一下文檔。相反，應(yīng)該專注于理解重要的概念，比如變量實例化、循環(huán)和函數(shù)。如果知識密度難度太大，也沒關(guān)，先過一篇，你把這些概念付諸實踐，當(dāng)你回過頭在來看，可能會理解起來會更加清晰。

基于文檔的學(xué)習(xí)可能會過于單調(diào)，可以看看 Codecademy 的 JavaScript課程，這課程是理論與實踐相結(jié)合的，相對會有樂趣一。 此外，如果你有時間，請參閱上面列出的每個概念，閱讀 Eloquent JavaScript中的相應(yīng)章節(jié)以加強你的學(xué)習(xí)。 Eloquent JavaScript 是一本很棒的免費在線書籍，每個有抱負的前端開發(fā)人員都應(yīng)該閱讀。

現(xiàn)在你已經(jīng)基本了解了 JavaScript 的語法，下一步就是將它應(yīng)用到 Web上。 要了解 JavaScript如 何與網(wǎng)站交互，首先你必須了解 文檔對象模型（DOM）。

DOM 是 HTML 文檔的一種表示結(jié)構(gòu)。它是一個樹形結(jié)構(gòu)，由對應(yīng)于 HTML 節(jié)點的 JavaScript 對象組成。要進一步了解DOM，請閱讀 CSSTricks 的 《什么是DOM》。它提供了對 DOM 的簡單而直接的解釋。

JavaScript 與 DOM 交互以更改和更新它。下面是一個例子，我們選擇一個 HTML 元素并更改它的內(nèi)容

var container = document.getElementById(“container”); 
container.innerHTML = "New Content!";

別擔(dān)心，那只是一個簡單的例子。使用 JavaScript DOM 操作，你可以做更多的事情。要了解有關(guān)如何使用 JavaScript 與 DO M交互的更多信息，請閱讀 MDN 的“文檔對象模型”一節(jié)中的以下指南。

事件及DOM

Examples of web and XML development using the DOM

如何建立 DOM 樹

DOM概述

使用選擇器定位DOM元素

再次強調(diào)一下，重點是要先理解概念而不是語法，希望能夠回答以下問題:

DOM 是什么?

如何查詢元素

如何添加事件監(jiān)聽？

如何更改 DOM 節(jié)點屬性？

有關(guān)常見的 JavaScript DOM 交互的列表，請查看 PlainJS 的 JavaScript 函數(shù)和助手。該網(wǎng)站提供了一些例子，說明如何在 HTML 元素上設(shè)置樣式和附加鍵盤事件監(jiān)聽器。如果你想深入挖掘，你可以隨時閱讀 Eloquent 講的 JavaScript 中關(guān)于DOM的部分。

要調(diào)試瀏覽器中的JavaScript，我們使用瀏覽器內(nèi)置的開發(fā)人員工具。 大多數(shù)瀏覽器都提供了 inspector 面板，可以讓你查看網(wǎng)頁的來源。 你可以在執(zhí)行時跟蹤 JavaScript，將調(diào)試語句打印到控制臺，以及查看網(wǎng)絡(luò)請求和資源等內(nèi)容。

里有一個關(guān)于使用 Chrome 開發(fā)工具的教程。如果你使用的 Firefox，可以查看本教程。

在這一點上，關(guān)于JavaScript還有很多東西需要學(xué)習(xí)。然而，最后一節(jié)包含了許多新信息。我想我們該休息一下，做幾個實踐了。它們有助于鞏固你剛剛學(xué)到的一些概念。

對于實踐1，轉(zhuǎn)到 AirBnB，打開瀏覽器的頁面檢查器，然后單擊控制臺選項卡。在這里，你可以在頁面上執(zhí)行JavaScript。我們要做的是通過操縱頁面上的一些元素來獲得一些樂趣?？纯茨闶欠窨梢酝瓿梢韵滤械?DOM 操作。

選擇具有唯一類名的標題標簽并更改文本

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

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

*　選擇一個特定的區(qū)域標簽，并向下移動250像素

*　選擇任何組件，如面板，并調(diào)整其透明度

定義一個名為 doS??omething 的函數(shù)，該函數(shù)j里定義一下alert (“Hello world”) 然后執(zhí)行它

選擇一個特定的段落標記，向其中注冊一個 click 事件，并在每次事件被觸發(fā)時運行 doSomething

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

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

這個實踐的主要目的是學(xué)習(xí)一些關(guān)于 JavaScript 和 DOM 操作的知識，并看到它們的實際應(yīng)用。

使用 CodePen，編寫一個使用DOM操作并需要一些編程邏輯來運行的基礎(chǔ)JavaScript 實踐。這個實踐的重點是把你在《前端練級攻略》第 1 部分中學(xué)到的一些東西和 JavaScript結(jié)合起來。這里有幾個可以作為啟發(fā)的參考例子。

Mood Color Generator

計算器

JavaScript 測試

Playable Canvas Asteroids

現(xiàn)在你已經(jīng)了解了一些 JavaScript并進行了一些實踐，我們將繼續(xù)學(xué)習(xí)一些更高級的概念。下面的概念并不直接相關(guān)。我將它們分組在本節(jié)中，因為它們對于理解如何構(gòu)建更復(fù)雜的前端系統(tǒng)是必要的。一旦你進入框架部分，你將更好地理解并使用它們。

當(dāng)你使用JavaScript進行更多工作時，你將遇到一些更高級別的概念。 以下其中一些概念的列表。 如果有時間，仔細閱讀每一個要點 此外，如果你想補充學(xué)習(xí)其它內(nèi)容，Eloquent JavaScript 涵蓋了大部分內(nèi)容。

繼承與原型鏈

作用域

事件輪詢

事件冒泡

Apply, call, 和 bind

回調(diào)函數(shù)和 promise

變量和函數(shù)的提升

柯里化

JavaScript如何與DOM交互有兩種方法:命令式和聲明式。一方面，聲明式編程關(guān)注所發(fā)生的事情。另一方面，命令式編程關(guān)注的是什么以及如何實現(xiàn)。

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 狀態(tài)存儲在 DOM 中。換句話說，專注于如何實現(xiàn)某件事。這段代碼最大的問題是它很脆弱。如果處理代碼的人將 HTML中 的類名從 hero 更改為villain，事件偵聽器將不再觸發(fā)，因為 DOM 中沒有 hero 類。

聲明式編程解決了這個問題。你不必選擇元素，而是將其留給您正在使用的框架或庫。這讓你專注于做什么而不是如何做。要了解更多信息，請查看 JavaScript的狀態(tài)——從命令式轉(zhuǎn)換到聲明式，以及 Web開發(fā):聲明式vs.命令式。

在這些文章和教程中，你可能已經(jīng)多次看到 Ajax 這個術(shù)語。Ajax 是一種允許 web 頁面使用 JavaScript 與服務(wù)器交互的技術(shù)

例如，當(dāng)你在網(wǎng)站上提交表單時，它收集你的輸入并發(fā)出 HTTP 請求，將數(shù)據(jù)發(fā)送到服務(wù)器。當(dāng)你在Twitter 上發(fā)布一條 tweet 時，你的 witter 客戶機向 Twitter 的服務(wù)器 API 發(fā)出 HTTP 請求，并使用服務(wù)器響應(yīng)更新頁面。

有關(guān) Ajax 的閱讀，請查看什么是Ajax。如果你仍然沒有完全理解 AJAX 的概念，請看看 Explain it like i’m 5, what is Ajax。如果這些還不夠，你還可以閱讀關(guān)于 HTTP 的JavaScript 章節(jié)。

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

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

最流行的 DOM 操作庫之一是 jQuery。請記住，jQuery 是一個命令式庫。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。如今，管理復(fù)雜 UI 是聲明性框架和庫，如 Vue、Angular 和 React。但是，我仍然建議你學(xué)習(xí)jQuery，因為在你的前端職業(yè)生涯中很可能會遇到它。

要學(xué)習(xí)j Query 的基礎(chǔ)知識，請查看 jQuery學(xué)習(xí)中心。它一步一步地通過一些重要的概念，比如動畫和事件處理。如果你想要更多的動手教程，可以看看 Codecademy 的 jQuery課程。

理解　JavaScript　的另一個重要概念是　ECMAScrip　t以及它與　JavaScript　的關(guān)系。今天，你平?？吹绞莾煞N主要的　JavaScript　風(fēng)格:ES5　和　ES6。ES5　和　ES6　是　JavaScript　使用的　ECMAScript　標準。你可以將它們看作JavaScript的版本。ES5　的最終草案是在2009年完成的，到目前為止你一直在使用它。

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

了解 ES5和 ES6 是非常重要的，因為今天你會看到使用這兩種方法的應(yīng)用程序。 ES5, ES6, ES2016, ES.Next:下一步:JavaScript版本控制是怎么回事 這是一篇很好介紹了 ES6 相關(guān)的知識，
Dan Wahlin的 ES6入門-下一版本的JavaScript正在發(fā)生什么。之后，你可以在 ES6 特性中看到從ES5 到 ES6 的完整變化列表。如果你想要更多，請查看這個包含 ES6 特性的Github存儲庫。

如果你已經(jīng)到了這一步，恭喜你自己。你已經(jīng)了解了很多JavaScript。讓我們把你學(xué)到的一些東西付諸實踐。

練習(xí)3 將你所學(xué)的 HTML 和 CSS 知識與 JavaScript 入門課程結(jié)合起來。在這個實驗中，你將創(chuàng)建自己設(shè)計的時鐘，并使其與 JavaScript 交互。在開始之前，我建議閱讀 解耦HTML、CSS和JavaScript的教程，以了解在混合使用 JavaScript 時的基本 CSS 類命名約定。我還在 CodePen上準備了一份筆的清單，你可以作為這次練習(xí)的參考。有關(guān)更多示例，請在 CodePen 上搜索clock。

Flat Clock

jQuery Wall Clock

Fancy Clock

Retro Clock

Simple JavaScript Clock

你可以用兩種方法做這個實驗。你可以先用 HTML 和 CSS 設(shè)計和創(chuàng)建布局，然后用 JavaScript 增加交互性?；蛘吣憧梢韵染帉慗 avaScript 邏輯，然后再進入布局。此外，你可以使用jQuery，但也可以隨意使用純 JavaScript。

掌握了JavaScript的基礎(chǔ)知識之后，是時候?qū)W習(xí) JavaScript 框架了。框架是 JavaScript 庫，可以幫助你構(gòu)造和組織代碼。JavaScript 框架為開發(fā)人員提供了復(fù)雜前端問題的可重復(fù)解決方案，比如狀態(tài)管理、路由和性能優(yōu)化。它們通常用于構(gòu)建web應(yīng)用程序。

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

在查看框架之前，理解框架傾向于使用的一些架構(gòu)模式是很重要的:MVC(Model–view–controller)、MVVM(Model–view–viewmodel)v和vMVP(Model–view–presenter)。這些模式被設(shè)計成在應(yīng)用層之間創(chuàng)建清晰的關(guān)注點分離。

關(guān)注點分離是一種設(shè)計原則，主要思想是將應(yīng)用程序拆分為不同的域特定層。 例如，你可以使用JavaScript 對象（通常稱為模型）來存儲狀態(tài)，而不是讓 HTML 保持應(yīng)用程序狀態(tài)。

要了解更多關(guān)于這些模式的信息，請先閱讀 Chrome Developers 的 MVC。之后，閱讀理解 MVC 和MVP(面向JavaScript和主干開發(fā)人員)。在那篇文章中，不要擔(dān)心學(xué)不會，看不懂，只需理解 MVC和 MVP 的部分概念即可。

Addy Osman 還寫了關(guān)于 MVVM 的 理解 MVVM 的JavaScript開發(fā)人員指南。要了解 MVC 的起源及其產(chǎn)生的原因，請閱讀 Martin Fowler 關(guān)于GUI體系結(jié)構(gòu)的文章。最后，閱讀 JavaScript MV* Patterns一節(jié)，學(xué)習(xí) JavaScript 設(shè)計模式。學(xué)習(xí)JavaScript設(shè)計模式是一本很棒的免費在線書籍。

JavaScript 框架不會重新發(fā)明輪子。它們中的大多數(shù)依賴于設(shè)計模式。你可以將設(shè)計模式視為解決軟件開發(fā)中常見問題的通用模板。

雖然理解 JavaScript 設(shè)計模式并不是學(xué)習(xí)框架的先決條件，但我建議在有時間的時候可以看看以下幾種設(shè)計模式。

裝飾器模式

工廠模式

單例模式

揭示模式

觀察者模式

理解并能夠?qū)崿F(xiàn)其中的一些設(shè)計模式不僅會使你成為更好的工程師，而且還會幫助你理解一些框架的底層功能。

AngularJS　是一個JavaScript MVC　框架，有時也是 MVVM 框架。它由谷歌維護，并在2010年首次發(fā)布時席卷了 JavaScript 社區(qū)。

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

如果你想了解更多關(guān)于 Angular 的知識，請查看 Angular文檔。他們還提供了一個名為 Angular Cat 的教程，可以讓你馬上投入到編程中去。Tim Jacobi 在 Github知識庫中提供了一個更完整的 Angular 學(xué)習(xí)指南。此外，看看約翰·帕帕寫的這本權(quán)威的最佳實踐風(fēng)格指南。

Angular 解決了開發(fā)人員在構(gòu)建復(fù)雜的前端系統(tǒng)時所面臨的許多問題。另一個流行的工具是 React，它是一個用于構(gòu)建用戶界面的庫。你可以把它想象成 MVC 中的 V。因為 React 只是一個庫，所以它通常使用一個稱為 Flux 的架構(gòu)。

Facebook設(shè)計React和Flux是為了解決MVC的一些缺點及其在規(guī)模上的問題?？纯此麄冎难菔?黑客方式:重新思考Facebook的Web應(yīng)用程序開發(fā)。它超過了Flux，它起源于此。

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

一旦你對 React 有了基本的了解，開始學(xué)習(xí) Flux。一個好的起點是官方的Flux文檔。在那之后，看看 Awesome React，這是一個精選的鏈接列表，可以幫助你在學(xué)習(xí)上更進一步。

現(xiàn)在你已經(jīng)掌握了 JavaScript 框架和架構(gòu)模式的一些基本知識，現(xiàn)在是時候?qū)⑺吨T實踐了。 在這兩個練習(xí)中，重點是應(yīng)用你學(xué)到的架構(gòu)概念。 特別是，保持您的代碼 DRY，明確分離關(guān)注點，并遵守單一責(zé)任原則。

練習(xí) 5 是使用不依賴框架的 JavaScript 分解和重構(gòu) Todo MVC 應(yīng)用程序。這個練習(xí)的目的是向你展示 MVC 如何在不混合框架特定語法的情況下工作。

首先，在TodoMVC上查看最終結(jié)果。第一步是在本地創(chuàng)建一個新項目，并首先建立 MVC 的三個組件。由于這是一個復(fù)雜的實驗，請參考 Github 存儲庫中的完整源代碼。如果你不能完全復(fù)制這個項目或者沒有時間，也沒關(guān)系。下載 repo 代碼并嘗試使用不同的 MVC 組件，直到你理解它們之間的關(guān)系。

練習(xí) 5 是應(yīng)用 MVC 的一個很好的練習(xí)，理解 MVC 是學(xué)習(xí) JavaScript 框架的重要一步。 練習(xí) 5 是按照 Scotch.io的教程來構(gòu)建一個帶有 Angular 的 Etsy 克隆。

使用Angular構(gòu)建一個Etsy克隆，Stamplay 將教你如何使用 Angular 構(gòu)建一個 web 應(yīng)用程序，如何使用 api 構(gòu)建接口，以及如何構(gòu)造大型項目。完成本教程后，能夠回答以下問題。

什么是 web 應(yīng)用程序?

MVC/MVVM 如何應(yīng)用于 Angular？

什么是API，它做什么

如何組織和構(gòu)造大型代碼庫

將 UI 分解為指令組件有什么好處？

如果你想嘗試構(gòu)建更多 Angular web 應(yīng)用程序，可以嘗試使用 AngularJS & Firebase構(gòu)建一個實時狀態(tài)更新應(yīng)用程序。

就像前端的其他部分一樣，JavaScript的發(fā)展很快，保持持續(xù)關(guān)注是很重要的。

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

Smashing Magazine

JavaScript Weekly

Reddit JavaScript

JavaScript Jabber

一如既往，最好的學(xué)習(xí)方法是以身作則。

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

AirBnB JavaScript Styleguide

Principles of Writing Consistent, Idiomatic JavaScript

Node Styleguide

MDN Coding Style

我無法強調(diào)閱讀好的代碼是多么有幫助，了解如何在獲取新內(nèi)容時搜索Github的相關(guān)存儲庫。

Lodash

Underscore

Babel

Ghost

NodeBB

KeystoneJS

在本指南結(jié)束時，您應(yīng)該已經(jīng)牢牢掌握了 JavaScript 的基本原理以及如何將它們應(yīng)用到網(wǎng)絡(luò)上。請記住，本指南為你提供了一個總體路線圖。如果你精通前端，花時間在項目上應(yīng)用這些概念是很重要的。你做的項目越多，對它們越有熱情，你會學(xué)到更多。

原文：https://medium.freecodecamp.o...

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

干貨系列文章匯總?cè)缦?，覺得不錯點個Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨，在進階的路上，共勉！

關(guān)注公眾號，后臺回復(fù)福利，即可看到福利，你懂的。