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

roadtogeek 發布于2019-08-19 18:25 / 2960人閱讀

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。

本文翻譯自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代碼中寫了個

元素，但是忘了寫，沒關系，瀏覽器會自動幫你插入到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 exampleStyleguides

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

GPU云服務器云服務器 javascript前端框架 javascript的框架 js和前端框架的優勢 php與前端的交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79580.html

[譯] 前端攻略-從路人甲到英雄無敵

摘要：整個系統變得日益繁復，人們也會去選擇使用一些預處理器或者后處理器來管理這種復雜性。的預處理器或者語言的擴展會在無聲無息之間提供類似于變量以及繼承這些特性。最主要的兩個的預處理器就是與。本文的 Github Repo本文翻譯自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。本文的第二部分：這里譯者的廢話，不感興趣的直接忽略前兩天才翻...

RancherLabs 2019-08-19 18:22 評論0 收藏0
基礎知識 - 收藏集 - 掘金

摘要：本文是面向前端小白的，大手子可以跳過，寫的不好之處多多分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。 JavaScript字符串所有API全解密 - 掘金關于我的博客：louis blog SF專欄：路易斯前端深度課原文鏈接：JavaScript字符串所有API全解密本文近 6k 字，讀完需 10 分鐘。字符串作為基本的信息交流的橋梁，幾乎被所有的編程...

wdzgege 2019-08-20 17:47 評論0 收藏0
專治前端焦慮的學習方案

摘要：不過今天我希望能夠更進一步，不僅僅再抱怨現狀，而是從我個人的角度來給出一個逐步深入學習生態圈的方案。最后，我還是想提到下對于的好的學習方法就是回顧參照各種各樣的代碼庫，學習人家的用法與實踐。本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實漂亮，順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...

codeGoogle 2019-08-21 14:41 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

chengjianhua 2019-08-29 12:35 評論0 收藏0