摘要：由于系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。后處理器在由預(yù)處理器手寫或編譯后對(duì)應(yīng)用更改。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。

譯者：前端小智
原文：medium.freecodecamp.org/from-zero-t…
medium.freecodecamp.org/from-zero-t…

我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及資料，被學(xué)習(xí)的資料壓得喘不過(guò)氣來(lái)，甚至不知道從哪里開始。

本指南列出前端學(xué)習(xí)路線，并提供了平時(shí)收藏的一些有效的資源。

為了使這本指南易于理解，我把它分成了兩部分。第一部分介紹了如何使用 HTML 和 CSS開發(fā)接口。第2部分將介紹 Javascript、框架和設(shè)計(jì)模式。

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

在前端開發(fā)中，一切都從 HTM 和 CSS 開始。HTML 和 CSS 控制你在 Web 頁(yè)面上看到的內(nèi)容。HTML 表示內(nèi)容，而 CSS 處理樣式和布局。

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

在完成這些教程之后，看看 CodeAcademy 的 Make a Website 課程。本教程只需要幾個(gè)小時(shí)就可以完成，對(duì)于使用 HTML 和 CSS 構(gòu)建網(wǎng)站是一個(gè)很好的入門教程。如果wq 想了解更多， Building web forms 是 CodeAcademy 提供的另一篇教程，該教程將指導(dǎo)你構(gòu)建和樣式化 web 表單。

要練習(xí) CSS，可以試試 CSS Diner。這是一個(gè)有趣的 CSS 挑戰(zhàn)游戲。HTM L和CSS 的另一個(gè)重要方面是布局。LearnLayout 是一個(gè)交互式教程，向你展示如何使用 HTML 和 CSS 創(chuàng)建布局。

另外，了解如何使用 CSS Tricks 的 Google 字體 的 API 基礎(chǔ)知識(shí)。 排版是界面的基本構(gòu)建塊。 如果你有時(shí)間，我強(qiáng)烈建議你閱讀這本免費(fèi)的在線書籍，Donny Truong 的 Professional Web Typography 它教你作為前端開發(fā)人員需要了解的關(guān)于排版的一切。

通過(guò)這些資源，不要太擔(dān)心記憶的問(wèn)題。相反，重點(diǎn)是理解 HTML 和 CSS 如何協(xié)同工作。

現(xiàn)在你已經(jīng)對(duì) HTML 和 CSS 有了基本的了解，讓我們來(lái)找點(diǎn)樂趣。在本節(jié)中，有兩個(gè)實(shí)踐旨在為你提供構(gòu)建網(wǎng)站和界面的實(shí)踐。我用“實(shí)踐”這個(gè)詞是因?yàn)樵趯?shí)踐中，你從失敗中學(xué)到的東西和你從成功中學(xué)到的一樣多。

實(shí)踐 1

在我們的第一個(gè)實(shí)踐中，我們將使用 CodePen。CodePen 是一個(gè)前端平臺(tái)，你可以在這里編寫 HTML 和 CSS 代碼，而不必在本地存儲(chǔ)文件。它還提供了實(shí)時(shí)預(yù)覽，可以在保存代碼時(shí)立即更新。

通過(guò)使用 CodePen，你可以一石二鳥。一方面，你要練習(xí) HTML 和 CSS。另一方面，你創(chuàng)建一個(gè)基本的進(jìn)度組合。我們還將使用 Dribbble，這是一個(gè)充滿設(shè)計(jì)靈感的網(wǎng)站。

在 Dribbble 找到一個(gè)簡(jiǎn)單到可以在幾個(gè)小時(shí)內(nèi)編寫代碼的設(shè)計(jì)。我選擇了一些設(shè)計(jì)讓你開始:1、2、3、4 和 5。我選擇了手機(jī)為先的網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)樗鼈儽茸烂婢W(wǎng)頁(yè)設(shè)計(jì)要簡(jiǎn)單。不過(guò)，也可以自由選擇桌面設(shè)計(jì)。

在你決定了一個(gè)設(shè)計(jì)之后，繼續(xù)嘗試用 CodePen 編寫它。如果遇到困難，請(qǐng)記住StackOverflow 是你的朋友。另一個(gè)有用的實(shí)踐是訪問(wèn)像 Medium、AirBnB和 Dropbox 這樣的網(wǎng)站，使用 inspector 工具查看它們是如何實(shí)現(xiàn)不同的布局和風(fēng)格的。另外，看看 pens on CodePen。我挑選了一些好的例子:

Twitter小部件

Article News Card

Simple Flat Menu

如果你出來(lái)的與原設(shè)計(jì)不同，請(qǐng)不要?dú)怵H。 繼續(xù)練習(xí)不同的設(shè)計(jì)，你會(huì)發(fā)現(xiàn)每次都有進(jìn)步。

如果你沒有設(shè)計(jì)背景，很可能你的設(shè)計(jì)眼光不夠成熟。具有良好設(shè)計(jì)眼光的前端開發(fā)人員將能夠識(shí)別好的設(shè)計(jì)并完美地復(fù)制它們。幾周前，我寫了一篇關(guān)于如何培養(yǎng)你的設(shè)計(jì)眼光的文章。

實(shí)踐 2

希望第一個(gè)實(shí)踐讓你對(duì)編寫 HTML 和 CSS 有一定的信心。 對(duì)于實(shí)踐 2，我們將看一些網(wǎng)站，然后編寫一些組件。

一些網(wǎng)站使用 CSS框架或 混淆它們的 CSS 類名，使你很難閱讀它們的源代碼。這就是為什么我選擇了幾個(gè)設(shè)計(jì)良好的網(wǎng)站，易于閱讀源代碼。

AirBnB: 嘗試復(fù)制他們的頁(yè)腳

PayPa:試著復(fù)制他們的導(dǎo)航欄l

Invision :嘗試復(fù)制頁(yè)面底部的注冊(cè)部分

Stripe: 嘗試復(fù)制他們的支付部分

同樣，實(shí)踐2的重點(diǎn)不是重新創(chuàng)建整個(gè)頁(yè)面。選擇幾個(gè)關(guān)鍵組件，如導(dǎo)航欄或英雄部分進(jìn)行編碼。我在網(wǎng)站列表旁邊提供了一個(gè)建議，但是請(qǐng)隨意選擇其他組件。

HTML 和 CSS 最佳實(shí)踐

到目前為止，你已經(jīng)學(xué)習(xí)了 HTML 和 CSS 的基礎(chǔ)知識(shí)。下一步是學(xué)習(xí)最佳實(shí)踐。最佳實(shí)踐是一組提高代碼質(zhì)量的非正式規(guī)則。

語(yǔ)義標(biāo)記

HTML?和?CSS?的最佳實(shí)踐之一是編寫語(yǔ)義標(biāo)記。好的?web?語(yǔ)義意味著使用適當(dāng)?shù)?HTML?標(biāo)簽和有意義的 CSS 類名來(lái)表示結(jié)構(gòu)的意義。

例如，h1 標(biāo)簽告訴我們它包裝的文本是一個(gè)重要的標(biāo)題。 另一個(gè)例子是footer標(biāo)簽 ，它告訴我們?cè)貙儆陧?yè)面底部。 有關(guān)進(jìn)一步，請(qǐng)閱讀 CSSTricks 的 正確的 HTML5 語(yǔ)義 和 什么是語(yǔ)義類名的構(gòu)成要素。

CSS 命名規(guī)范

CS S的下一個(gè)重要的最佳實(shí)踐是正確的命名規(guī)范。良好的命名規(guī)范，如語(yǔ)義標(biāo)簽，傳達(dá)了意義，并有助于使我們的代碼可預(yù)測(cè)、可讀和可維護(hù)。你可以在這篇 OOCSS、ACSS、BEM、SMACSS：它們是什么");

一般來(lái)說(shuō)，我建議你嘗試一些簡(jiǎn)單的命名規(guī)范，這些規(guī)范對(duì)你來(lái)說(shuō)是直觀的。隨著時(shí)間的推移，你會(huì)發(fā)現(xiàn)最適合你的方法。要了解像 Medium 這樣的公司是如何利用像 BEM 這樣的命名約定的，請(qǐng)閱讀 Medium’s CSS is actually pretty f***ing good.。在這篇文章中，你還會(huì)了解到，提出一組有效的 CSS 約定是一個(gè)迭代過(guò)程。

CSS重置

從頁(yè)邊距到行高，每個(gè)瀏覽器都有一些小的樣式不一致。因此，需要重置 CSS。MeyerWeb 是一個(gè)受歡迎的重置。如果你想深入了解，可以閱讀 Create Your Simple Reset.css File。

跨瀏覽器支持

跨瀏覽器支持意味著你的代碼支持最新的瀏覽器。像 transition 這樣的 CSS 屬性需要廠商前綴才能在不同的瀏覽器中正常工作。在本文中，我可以閱讀更多關(guān)于供應(yīng)商前綴的信息，即 CSS供應(yīng)商前綴。最重要的是，你應(yīng)該跨多個(gè)瀏覽器(包括 Chrome、Firefox 和 Safari )測(cè)試你的網(wǎng)站。

CSS 預(yù)處理器與 CSS 后處理器

自20世紀(jì)90年代CSS引入以來(lái)，CSS走過(guò)了漫長(zhǎng)的道路。由于UI系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。

CS S預(yù)處理程序是 CSS 語(yǔ)言擴(kuò)展，它添加了一些額外的功能，比如變量、混合和繼承。兩個(gè)主要的CSS預(yù)處理程序是 Sass 和 Less。2016 年，Sass的使用范圍更加廣泛。Bootstrap是 一種流行的響應(yīng)式 CSS 框架，它也正在從 Less 轉(zhuǎn)換到 Sass。而且，當(dāng)大多數(shù)人談?wù)?Sass時(shí)，他們實(shí)際上是在談?wù)?SCSS。

CSS 后處理器在由預(yù)處理器手寫或編譯后對(duì) CSS 應(yīng)用更改。 例如，PostCSS 等一些后處理器具有自動(dòng)添加瀏覽器供應(yīng)商前綴的插件。

當(dāng)您第一次得知有 CSS預(yù)處理器和后處理器時(shí)，你很有可能在任何地方已經(jīng)使用它們。 但是，從簡(jiǎn)單開始，僅在必要時(shí)添加變量和 mixin 等擴(kuò)展。 我之前建議的文章，Medium’s CSS is actually pretty f***ing good，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。

網(wǎng)格系統(tǒng)和響應(yīng)能力

網(wǎng)格系統(tǒng)是CSS結(jié)構(gòu)，它允許你水平和垂直地堆疊元素。

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

網(wǎng)格系統(tǒng)的主要目的之一是為你的網(wǎng)站添加響應(yīng)性。響應(yīng)性意味著你的網(wǎng)站根據(jù)窗口寬度調(diào)整大小。很多時(shí)候，響應(yīng)是通過(guò)使用 CSS 媒體查詢實(shí)現(xiàn)的，CSS 規(guī)則只適用于特定的屏幕寬度。

關(guān)于媒體查詢知識(shí)及擴(kuò)展可以看看以下幾篇文章：

Intro to Media Queries

mobile-first

An Introduction to Mobile-First Media Queries

現(xiàn)在你已經(jīng)掌握了最佳實(shí)踐，讓我們進(jìn)行測(cè)試。下面兩個(gè)實(shí)踐的目標(biāo)是練習(xí)編寫干凈的代碼，并觀察最佳實(shí)踐對(duì)可讀性和可維護(hù)性的長(zhǎng)期影響。

實(shí)踐 3

對(duì)于實(shí)踐 3，選擇你之前做過(guò)的項(xiàng)目，并使用你在這過(guò)程所學(xué)到的知識(shí)來(lái)重構(gòu)你的代碼。重構(gòu)意味著編寫代碼，使代碼更容易閱讀，更簡(jiǎn)單。

能夠有效地重構(gòu)代碼是前端開發(fā)人員的一項(xiàng)重要技能。 編寫高質(zhì)量代碼是一個(gè)迭代過(guò)程。 CSS體系結(jié)構(gòu)：重構(gòu)你的 CSS 是重構(gòu)代碼的入門指南。

在重構(gòu)代碼時(shí)，有幾件事需要問(wèn)問(wèn)自己。

*?你的取的類名是否有歧義");

*?你的 HTML 和 CSS 是語(yǔ)義化的嗎");

你是否在代碼中反復(fù)使用相同的十六進(jìn)制顏色代碼");

你的代碼在 Safari 和 Chrome 上運(yùn)行得一樣的嗎");

你是否可以用類似于 Skeleton 的網(wǎng)格系統(tǒng)替換一些布局代碼");

你經(jīng)常使用 !important 標(biāo)志嗎");

實(shí)踐 4

最后一個(gè)實(shí)驗(yàn)把你學(xué)到的關(guān)于最佳實(shí)踐的知識(shí)運(yùn)用起來(lái)。然而，最佳實(shí)踐的效果通常不會(huì)變得明顯，直到你將它們應(yīng)用到一個(gè)更大的項(xiàng)目中。

在最后一個(gè)實(shí)踐中，為自己建立一個(gè)作品集網(wǎng)站。作為前端開發(fā)者，你的作品集網(wǎng)站是你最重要的數(shù)字資產(chǎn)之一。作品集是一個(gè)展示你作品的網(wǎng)站。更重要的是，它是一個(gè)持續(xù)的記錄，幫助你跟蹤你的進(jìn)步和發(fā)展。所以即使你只有一兩件事要展示，也要展示出來(lái)。

首先，跟隨阿德漢姆·達(dá)納韋的文章 《設(shè)計(jì)和開發(fā)作品集網(wǎng)站站的簡(jiǎn)單工作流程》

如果你的第一個(gè)作品集網(wǎng)站迭代并不完美，那也沒關(guān)系。作品集網(wǎng)站需要經(jīng)歷許多迭代。還有，重要的是你要用自己的技能來(lái)建造它。

雖然 HTML 和 CSS 不會(huì)很快過(guò)時(shí)，但是跟上前端環(huán)境的發(fā)展是很重要的。

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

CSSTricks

Smashing Magazine

Designer News

Nettuts+

CSS Wizard

最后，最好的學(xué)習(xí)方法是以身作則。這里有一套樣式指南和編碼規(guī)范，將教你如何成為一個(gè)更有效的前端。

樣式指南

Web 樣式指南是可以在整個(gè)網(wǎng)站中重用的 CSS 組件和模式的集合。從這些樣式指南中需要注意的關(guān)鍵問(wèn)題是，基于組件的 HTML 和 CSS 方法如何允許重用代碼來(lái)保持代碼的清爽(DRY)。

Mapbox

LonelyPlanet

SalesForce

MailChimp

編碼規(guī)范

編碼規(guī)范讓代碼易讀且可維護(hù)。其中一些鏈接(如 CSS Guidelines)是編寫更好的 HTML 和 CSS 的指南，而其他鏈接(如 Github internal CSS toolkit and Guidelines)是高質(zhì)量代碼的例子。

CSS Guidelines

Github internal CSS toolkit and guidelines

AirBnB’s CSS Styleguide

希望在本文結(jié)束時(shí)，你已經(jīng)熟悉 HTML 和 CSS，并掌握了一些項(xiàng)目。 學(xué)習(xí)前端的最佳方式是建立項(xiàng)目和實(shí)踐。 請(qǐng)記住，每個(gè)前端開發(fā)人員都必須從某個(gè)地方開始。 從今天開始比明天開始更好。

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

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

語(yǔ)言

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

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

Grammar and types (語(yǔ)法和類型)

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

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

Functions(函數(shù))

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

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

交互性

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

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

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

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

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

事件及DOM

Examples of web and XML development using the DOM

如何建立 DOM 樹

DOM概述

使用選擇器定位DOM元素

再次強(qiáng)調(diào)一下，重點(diǎn)是要先理解概念而不是語(yǔ)法，希望能夠回答以下問(wèn)題:

DOM 是什么");

如何查詢?cè)?/p>

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

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

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

檢查

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

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

實(shí)踐基礎(chǔ)

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

實(shí)踐 1

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

選擇具有唯一類名的標(biāo)題標(biāo)簽并更改文本

選擇頁(yè)面上的任何元素并將其刪除

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

*?選擇一個(gè)特定的區(qū)域標(biāo)簽，并向下移動(dòng)250像素

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

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

選擇一個(gè)特定的段落標(biāo)記，向其中注冊(cè)一個(gè) click 事件，并在每次事件被觸發(fā)時(shí)運(yùn)行 doSomething

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

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

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

實(shí)踐 2

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

Mood Color Generator

計(jì)算器

JavaScript 測(cè)試

Playable Canvas Asteroids

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

語(yǔ)言

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

繼承與原型鏈

作用域

事件輪詢

事件冒泡

Apply, call, 和 bind

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

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

柯里化

命令式和聲明

JavaScript如何與DOM交互有兩種方法:命令式和聲明式。一方面，聲明式編程關(guān)注所發(fā)生的事情。另一方面，命令式編程關(guān)注的是什么以及如何實(shí)現(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)
 })
}

這是命令式編程的一個(gè)例子，我們手動(dòng)查詢一個(gè)元素并將 UI 狀態(tài)存儲(chǔ)在 DOM 中。換句話說(shuō)，專注于如何實(shí)現(xiàn)某件事。這段代碼最大的問(wèn)題是它很脆弱。如果處理代碼的人將 HTML中 的類名從 hero 更改為villain，事件偵聽器將不再觸發(fā)，因?yàn)?DOM 中沒有 hero 類。

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

Ajax

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

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

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

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

jQuery

到目前為止，你一直在使用 JavaScript 進(jìn)行 DOM 操作。事實(shí)上，有很多 DOM 操作庫(kù)提供api 來(lái)簡(jiǎn)化你編寫的代碼。

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

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

ES5 vs. ES6

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

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

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

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

練習(xí) 3

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

Flat Clock

jQuery Wall Clock

Fancy Clock

Retro Clock

Simple JavaScript Clock

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

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

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

架構(gòu)模式

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

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

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

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

設(shè)計(jì)模式

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

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

裝飾器模式

工廠模式

單例模式

揭示模式

觀察者模式

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

AngularJS

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

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

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

React + Flux

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

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

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

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

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

練習(xí) 4

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

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

練習(xí) 5

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

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

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

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

什么是API，它做什么

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

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

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

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

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

Smashing Magazine

JavaScript Weekly

Reddit JavaScript

JavaScript Jabber

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

樣式指南

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

AirBnB JavaScript Styleguide

Principles of Writing Consistent, Idiomatic JavaScript

Node Styleguide

MDN Coding Style

代碼庫(kù)

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

Lodash

Underscore

Babel

Ghost

NodeBB

KeystoneJS

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

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

一個(gè)笨笨的碼農(nóng)，我的世界只能終身學(xué)習(xí)！

更多內(nèi)容請(qǐng)關(guān)注公眾號(hào)《大遷世界》！

歡迎加入前端大家庭，里面會(huì)經(jīng)常分享一些技術(shù)資源。