前端開(kāi)發(fā)從未像現(xiàn)在這樣復(fù)雜和令人興奮?；旧厦扛粢惶炀蜁?huì)出現(xiàn)新的工具、庫(kù)、框架和插件。要學(xué)習(xí)的東西越來(lái)越多。

好在我們的 Grab web 團(tuán)隊(duì)（譯者注：Grab 是東南亞的一家打車(chē)平臺(tái)）一直遵循著最新、最佳的方法，并將現(xiàn)代 JavaScript 生態(tài)系統(tǒng)納入了我們的 web 應(yīng)用。

這樣也導(dǎo)致，我們的新員工或后端工程師，他們可能會(huì)不熟悉這些現(xiàn)代 JavaScript 生態(tài)系統(tǒng)，為了在 web app 中完成某項(xiàng)功能或修復(fù)某些 bug , 他們不得不去學(xué)習(xí)，最終被不斷涌現(xiàn)的新事物所“淹沒(méi)”。

為了指導(dǎo)他們快速接受前沿技術(shù)的演進(jìn)，輕松熟悉生態(tài)系統(tǒng)，并盡可能快地輸出代碼。我們發(fā)布了這樣一本學(xué)習(xí)指南，介紹我們做了什么和為什么要這樣做。

本指南的靈感來(lái)源于“治療 JavaScript 疲勞的學(xué)習(xí)計(jì)劃”（A Study Plan to Cure JavaScript Fatigue），并在基于目前最適合 Grab 發(fā)展的基礎(chǔ)上，對(duì)下面這些適用于前端開(kāi)發(fā)的庫(kù)和框架進(jìn)行推薦。

文中還會(huì)解釋選擇某某庫(kù)和某某框架的原因，并提供學(xué)習(xí)資源鏈接，以便讀者能夠自由選擇。以及在某些情況下可能效果更好的替代選擇，以供參考和進(jìn)一步自我探索。

如果您非常熟悉前端開(kāi)發(fā)，并且一直有跟進(jìn)最新的技術(shù)，本指南可能對(duì)您用處不大。它偏向針對(duì)前端新手。如果您的公司正在探索現(xiàn)代 JavaScript 堆棧，您會(huì)發(fā)現(xiàn)本指南可能對(duì)您的公司也有用！

請(qǐng)注意，本指南也有在 GitHub 上發(fā)布，我們將定期更新。

前提

• 對(duì)核心編程概念有一定理解。

• 可使用基本的命令行操作并熟悉源碼版本控制系統(tǒng)（如 Git ）。

• 有 Web 開(kāi)發(fā)經(jīng)驗(yàn)。 使用 Ruby on Rails、Django、Express 等框架構(gòu)建過(guò) Web 應(yīng)用。

• 了解 Web 工作原理。 熟悉 Web 協(xié)議和約定，如 HTTP 和 RESTful API 。

涉及內(nèi)容:

• 單頁(yè)應(yīng)用（Single-page Apps）

• 現(xiàn)代 JavaScript（ New-age JavaScript）

• 用戶(hù)界面（User Interface）

• 狀態(tài)管理（State Management）

• 規(guī)則編碼（Coding with Style）

• 測(cè)試（Testing）

• JavaScript 檢測(cè)（Linting JavaScript）

• CSS 檢測(cè)（Linting CSS）

• 類(lèi)型（Types）

• 系統(tǒng)構(gòu)建（Build System）

• 包管理（Package Management）

• 持續(xù)集成（Continuous Integration）

• 托管（Hosting）

• 部署（Deployment）

如果您已有相關(guān)經(jīng)驗(yàn)，可選擇跳過(guò)部分內(nèi)容。

單頁(yè)應(yīng)用（SPAs）

Web 開(kāi)發(fā)人員現(xiàn)在將其構(gòu)建的產(chǎn)品稱(chēng)為 Web 應(yīng)用，而不是網(wǎng)站。雖然這兩個(gè)術(shù)語(yǔ)之間沒(méi)有嚴(yán)格的區(qū)別，但 Web 應(yīng)用往往是高度互動(dòng)和動(dòng)態(tài)的，允許用戶(hù)執(zhí)行操作并接收響應(yīng)。

傳統(tǒng)上，瀏覽器從服務(wù)器接收 HTML 并呈現(xiàn)。當(dāng)用戶(hù)定位到另一個(gè) URL 時(shí)，需要進(jìn)行全頁(yè)刷新，并且服務(wù)器為新頁(yè)面發(fā)送新的新 HTML 。這被稱(chēng)為服務(wù)器端渲染。

然而，在現(xiàn)代的 SPAs 中，已被客戶(hù)端渲染取代。瀏覽器從服務(wù)器加載初始頁(yè)面，以及整個(gè)應(yīng)用所需的腳本（框架、庫(kù)、應(yīng)用代碼）和樣式表。當(dāng)用戶(hù)定位到其他頁(yè)面時(shí)，不會(huì)觸發(fā)頁(yè)面刷新。通過(guò) HTML5 History API 更新頁(yè)面的 URL 。瀏覽器通過(guò) AJAX 請(qǐng)求檢索新頁(yè)面（通常以 JSON 格式）所需的新數(shù)據(jù)。然后， SPA 通過(guò) JavaScript 動(dòng)態(tài)更新已經(jīng)在初始頁(yè)面加載中已經(jīng)下載好的新頁(yè)面。這種模式類(lèi)似于原生手機(jī)應(yīng)用的工作原理。

優(yōu)勢(shì):

• 應(yīng)用感更強(qiáng)，用戶(hù)不會(huì)看到由于全頁(yè)刷新導(dǎo)致頁(yè)面之間的閃爍。

• 對(duì)服務(wù)器進(jìn)行的 HTTP 請(qǐng)求較少，因?yàn)椴槐貫槊總€(gè)頁(yè)面加載重復(fù)下載相同的資料。

• 明確分離客戶(hù)端與服務(wù)器之間的關(guān)系；可以輕松地為不同的平臺(tái)構(gòu)建新的客戶(hù)端而無(wú)需修改服務(wù)器代碼。只要 API contract 不被破壞，還可以獨(dú)立地修改客戶(hù)機(jī)和服務(wù)器上的技術(shù)棧。

劣勢(shì):

• 需加載多個(gè)頁(yè)面所需的框架、應(yīng)用代碼和初始頁(yè)面加載需要的成本。

• 在服務(wù)器上會(huì)有一個(gè)額外的步驟，即將其配置為將所有請(qǐng)求被路由到單個(gè)入口點(diǎn)，并允許客戶(hù)端路由從那里接管。

• SPAs 依賴(lài)于 JavaScript 來(lái)呈現(xiàn)內(nèi)容，但并不是所有的搜索引擎在爬行期間都會(huì)執(zhí)行 JavaScript ，而且可能會(huì)在您的頁(yè)面上看到空的內(nèi)容。這在無(wú)意中會(huì)影響應(yīng)用的 SEO 。

雖然傳統(tǒng)的服務(wù)器端呈現(xiàn)的應(yīng)用仍然是可行的選擇，但是由于客戶(hù)端和服務(wù)器代碼可以獨(dú)立開(kāi)發(fā)和發(fā)布，因此清晰明了的客戶(hù)端和服務(wù)器分離可以更好地?cái)U(kuò)展到較大的工程團(tuán)隊(duì)。

由于 Web 開(kāi)發(fā)人員構(gòu)建的是應(yīng)用而不是頁(yè)面，因此客戶(hù)端 JavaScript 架構(gòu)變得越來(lái)越重要。在服務(wù)器端呈現(xiàn)的頁(yè)面中，通常使用 jQuery 的代碼片段將用戶(hù)交互性添加到每個(gè)頁(yè)面。但是，當(dāng)構(gòu)建大型應(yīng)用程序時(shí)，光有 jQuery 還不夠。畢竟，jQuery 主要是一個(gè)用于 DOM 操作的庫(kù)，它不是框架；無(wú)法為應(yīng)用定義清晰的結(jié)構(gòu)和組織。

JavaScript 框架往往被構(gòu)建以便在 DOM 上提供更高級(jí)別的抽象，從而允許將內(nèi)存中的狀態(tài)保留在 DOM 之外。使用框架還帶來(lái)了一些適合應(yīng)用的重用建議的推薦和最佳做法的好處。團(tuán)隊(duì)中不熟悉代碼基礎(chǔ)但具有框架經(jīng)驗(yàn)的新工程師將會(huì)更容易理解代碼，因?yàn)樗且砸环N他們熟悉的結(jié)構(gòu)組織起來(lái)的。流行框架通常會(huì)有很多教程和指南，利用同事和社區(qū)的知識(shí)和經(jīng)驗(yàn)，可幫助新工程師快速上手。

學(xué)習(xí)鏈接

• 單頁(yè)應(yīng)用：優(yōu)缺點(diǎn)分析

• Web 開(kāi)發(fā)的演進(jìn)

• 選擇客戶(hù)端渲染的原因

現(xiàn)代 JavaScript

在深入了解構(gòu)建 JavaScript Web 應(yīng)用的各個(gè)方面之前，熟悉 Web-JavaScript 或 ECMAScript 的語(yǔ)言非常重要。 JavaScript 是一種非常通用的語(yǔ)言，可以用它來(lái)構(gòu)建 Web 服務(wù)器，也可以構(gòu)建原生移動(dòng)應(yīng)用和桌面應(yīng)用。

在 2015 年之前，最后一次重大更新是 2011 年發(fā)布的 ECMAScript 5.1 。然而，近年來(lái)，JavaScript 在短時(shí)間內(nèi)突然出現(xiàn)大幅度改善。2015 年，ECMAScript 2015（以前稱(chēng)為 ECMAScript 6 ）發(fā)布，引入大量的語(yǔ)法結(jié)構(gòu)，使得編寫(xiě)代碼不再那么笨重。如果你對(duì)這段歷史感興趣，Auth0 有寫(xiě)一篇關(guān)于 history of JavaScript 的文章。直到現(xiàn)在，也并非所有的瀏覽器都完全實(shí)現(xiàn)了 ES2015 規(guī)范。類(lèi)似 Babel 這類(lèi)的工具使開(kāi)發(fā)人員能夠在其應(yīng)用中編寫(xiě) ES2015 ，隨后 Babel 將其轉(zhuǎn)換為 ES5 以兼容瀏覽器。

熟悉 ES5 和 ES2015 都至關(guān)重要。 ES2015 現(xiàn)在依然很新，很多開(kāi)源代碼和 Node.js 應(yīng)用仍然是使用 ES5 編寫(xiě)。如果您是在瀏覽器控制臺(tái)中進(jìn)行調(diào)試，可能無(wú)法使用 ES2015 語(yǔ)法。另一方面，稍后將介紹的許多現(xiàn)代庫(kù)的文檔和示例代碼都是用 ES2015 寫(xiě)的。在 Grab ，我們使用 babel-preset-env 來(lái)享受 JavaScript 的不斷改進(jìn)的語(yǔ)法來(lái)提升生產(chǎn)力。 babel-preset-env 能智能地確定哪些 Babel 插件是必需的（哪些新的語(yǔ)言特性不被支持，需被翻譯），以讓瀏覽器更好地對(duì) ES 的各種語(yǔ)言特性提供原生支持。如果您喜歡使用已經(jīng)穩(wěn)定的語(yǔ)言特性，那么 babel-preset-stage-3（一個(gè)完全可以在瀏覽器中實(shí)現(xiàn)的規(guī)范）可能會(huì)更適合您。

花一兩天的實(shí)際去修正 ES5 并摸索 ES2015 。 ES2015 中使用最多的特性包括“箭頭函數(shù)”、“Classes”（語(yǔ)法糖）、“字符串模板”、“解構(gòu)”，“Default/Rest/Spread 操作符”以及“導(dǎo)入和導(dǎo)出模塊”。

預(yù)估時(shí)間: 3–4 天. 可在學(xué)習(xí)其他庫(kù)并嘗試構(gòu)建應(yīng)用時(shí)學(xué)習(xí)/查找語(yǔ)法。

學(xué)習(xí)鏈接

• Learn ES5 on Codecademy

• Learn ES2015 on Babel

• ES6 Katas

• Free Code Camp

• 你不知道的 JS  (高階內(nèi)容，初學(xué)者可選)

用戶(hù)界面?—?React

如果要說(shuō)近年來(lái)給前端生態(tài)帶來(lái)風(fēng)暴式影響的 JavaScript 項(xiàng)目，當(dāng)屬 React 。 React 是一個(gè)由 Facebook 開(kāi)發(fā)的庫(kù)。 在 React 中，開(kāi)發(fā)人員為其 Web 界面編寫(xiě)組件并將其組合在一起。

React 帶來(lái)了許多激進(jìn)的想法，并鼓勵(lì)開(kāi)發(fā)人員重新思考最佳實(shí)踐。 多年來(lái)，Web 開(kāi)發(fā)人員被灌輸分開(kāi)編寫(xiě) HTML、JavaScript 和 CSS 的理念 ，但 React 恰恰相反，鼓勵(lì)在 JavaScript 中編寫(xiě) CSS  。這聽(tīng)起來(lái)很瘋狂，但在嘗試之后，會(huì)發(fā)現(xiàn)其實(shí)并不奇怪。作為影響前端發(fā)展正轉(zhuǎn)向基于組件的發(fā)展模式的關(guān)鍵，React 的特點(diǎn)如下：

• 聲明式?—?描述想在 View 中看到的，而不是如何實(shí)現(xiàn)它。在 jQuery 時(shí)代，開(kāi)發(fā)人員必須提出一系列的步驟來(lái)操縱 DOM ，從一個(gè)應(yīng)用狀態(tài)到下一個(gè)應(yīng)用狀態(tài)。在 React 中，只需更改組件中的狀態(tài)，View 將根據(jù)狀態(tài)進(jìn)行更新。也可通過(guò)查看 render（）方法中的標(biāo)記來(lái)確定組件的外觀。

• 函數(shù)式—?View 是基于 state 和 props 的純函數(shù)。多數(shù)情況下，React 組件由 props（外部參數(shù)）和 state（內(nèi)部數(shù)據(jù)）定義。相同的 props 和 state ，會(huì)構(gòu)成相同的視圖。純函數(shù)易于測(cè)試，功能組件也大多相同。由于組件的界面定義良好，可通過(guò)提供不同的 props 和 state 來(lái)對(duì)組件進(jìn)行測(cè)試并比較，從而輕松完成測(cè)試。

• 可重用性?—?以基于組件的方式編寫(xiě) View 就是鼓勵(lì)重用性。我們發(fā)現(xiàn)定義一個(gè)組件的 propTypes 能讓 React 代碼自我記錄，以讓用戶(hù)可以清楚地知道使用該組件需要什么。此外，您的視圖和邏輯在組件中是獨(dú)立的，不會(huì)受到影響也不影響其他組件。只需向組件提供相同的 props  ，就可輕松地在大規(guī)模重構(gòu)過(guò)程中 shift 組件。

• 高性能—?您可能已經(jīng)聽(tīng)說(shuō) React 使用的是 virtual DOM（請(qǐng)勿與 shadow DOM 混淆），并且在狀態(tài)發(fā)生變化時(shí)重新呈現(xiàn)所有內(nèi)容，那你知道為什么需要 virtual DOM 嗎？雖然現(xiàn)代 JavaScript 引擎很快，但從 DOM 讀取和寫(xiě)入速度很慢。 React 在內(nèi)存中保持 DOM 的輕量級(jí)虛擬渲染。重新渲染一切本身就是一句有誤導(dǎo)性的術(shù)語(yǔ)。在 React 中它實(shí)際上是指重新渲染 DOM 的內(nèi)存中呈現(xiàn)，而不是實(shí)際的 DOM 本身。當(dāng)組件的底層數(shù)據(jù)發(fā)生變化時(shí)，將創(chuàng)建一個(gè)新的虛擬呈現(xiàn)，并與先前的進(jìn)行比較。然后將差異（所需的最小變化集）修補(bǔ)到真正的 browser DOM 。

• 易于學(xué)習(xí)?—?學(xué)習(xí) React 非常簡(jiǎn)單。與 this 相比，React API surface 相對(duì)較小; 只有很少的幾個(gè) API 可以學(xué)習(xí)，并且不會(huì)經(jīng)常變化。React 社區(qū)是最大的社區(qū)之一，同時(shí)也是一個(gè)充滿(mǎn)活力的工具生態(tài)系統(tǒng)，有開(kāi)放的 UI 組件，以及一大批在線資源可供學(xué)習(xí)。

• 優(yōu)秀的開(kāi)發(fā)體驗(yàn)?—有許多工具可以改善 React 的開(kāi)發(fā)體驗(yàn)。React Developer Tools 是一個(gè)瀏覽器擴(kuò)展，可檢查組件，查看和操作其 props 和 state 。使用 webpack 進(jìn)行熱更新可讓您在瀏覽器中查看代碼的更改，而無(wú)需刷新瀏覽器。Facebook 還提供了一個(gè) codemod 腳本，以幫助您在有庫(kù)更新時(shí)將代碼遷移到新的 API ，使升級(jí)過(guò)程相對(duì)無(wú)痛。

經(jīng)過(guò)多年發(fā)展，其實(shí)也出現(xiàn)了比 React 更出色的新視圖庫(kù)。React 可能不是最快的庫(kù)，但在生態(tài)系統(tǒng)、整體使用體驗(yàn)和效率方面，它仍然是最強(qiáng)大的庫(kù)之一。 Facebook 正在通過(guò)重寫(xiě)基礎(chǔ)協(xié)調(diào)算法，力圖使 React 更快。 React 讓我們知道如何編寫(xiě)更好的代碼和更好維護(hù)的 Web 應(yīng)用，并讓我們成長(zhǎng)為更好的工程師。

我們建議您在 React 主頁(yè)上瀏覽一個(gè)關(guān)于建立 tic-tac-toe 游戲的教程，以先了解 React 是什么及能做什么。想要進(jìn)一步深入學(xué)習(xí)，可查看 React Router 的創(chuàng)始人、React 社區(qū)專(zhuān)家發(fā)布的高級(jí)免費(fèi)課程“ React Fundamentals ”，里面還涵蓋了 React 官方文檔未寫(xiě)入的更高級(jí)的概念。Facebook 的 Create React App 是以最小配置支持 React 項(xiàng)目的工具，也強(qiáng)烈建議在您新的 React 項(xiàng)目中啟用。

React 是一個(gè)庫(kù)，而不是一個(gè)框架，并不處理視圖層以下的層次 - 應(yīng)用狀態(tài)。后面會(huì)說(shuō)到。

估計(jì)時(shí)間: 3–4 天. 嘗試構(gòu)建類(lèi)似待辦事項(xiàng)列表這種簡(jiǎn)單的項(xiàng)目，去 Hacker News 克隆一些純 React 經(jīng)驗(yàn)。 你會(huì)慢慢收獲和成長(zhǎng)，期間可能會(huì)面臨一些也許無(wú)法用 React 解決的問(wèn)題，下面的主題會(huì)講到…

學(xué)習(xí)鏈接

• React Official Tutorial

• React Fundamentals

• Simple React Development in 2017

• Presentational and Container Components

替代方案

• Angular

• Ember

• Vue

• Cycle

狀態(tài)管理?—?Flux/Redux

隨著您的應(yīng)用越來(lái)越大，可能會(huì)發(fā)現(xiàn)應(yīng)用結(jié)構(gòu)變得有點(diǎn)混亂。應(yīng)用中的組件可能要共享和顯示常見(jiàn)數(shù)據(jù)，但 React 中卻沒(méi)有很優(yōu)雅的方式來(lái)處理這些情況。 畢竟，React 只是視圖層，它并沒(méi)有明確規(guī)范如何在傳統(tǒng)的 MVC 范例中構(gòu)建應(yīng)用的其他層，如 model 和 controller 。為了解決這個(gè)問(wèn)題，F(xiàn)acebook 發(fā)明了 Flux ，一款應(yīng)用架構(gòu)，通過(guò)使用單向數(shù)據(jù)流來(lái)補(bǔ)充 React 的可組合視圖組件。點(diǎn)此可閱讀關(guān)于 Flux 如何運(yùn)作的介紹。 總而言之，F(xiàn)lux 范式（Flux pattern）具有以下特點(diǎn)：

• 單向數(shù)據(jù)流?—?使應(yīng)用更可預(yù)測(cè)，以輕松跟蹤更新。

• 關(guān)注點(diǎn)分離?—?Flux 架構(gòu)中的各個(gè)部分都有明確的職責(zé)，并且高度分離。

• 適用于聲明式編程?—? store 可將更新發(fā)送到 view ，而無(wú)需指定如何在狀態(tài)之間轉(zhuǎn)換視圖。

由于 Flux 本身不是一個(gè)框架，開(kāi)發(fā)人員嘗試提出各種 Flux 范式的實(shí)現(xiàn)。最后，出現(xiàn)了一個(gè)最亮眼的贏家，那就是 Redux 。 Redux 將來(lái)自 Flux、Command pattern 和 Elm 架構(gòu)的想法融合在一起，已然成為目前 React 開(kāi)發(fā)者最常使用的狀態(tài)管理庫(kù)。其核心概念是：

• 應(yīng)用狀態(tài)（state）是由單個(gè)普通的 JavaScript 對(duì)象（POJO）描述。

• 調(diào)度一個(gè) action (也是 POJO) 來(lái)修改狀態(tài)。

• Reducer 是一種純函數(shù)，它利用當(dāng)前狀態(tài)和動(dòng)作來(lái)產(chǎn)生新的狀態(tài)。

這些概念聽(tīng)起來(lái)很簡(jiǎn)單，但功能強(qiáng)大，因?yàn)樗鼈兪箲?yīng)用能夠：

• 在服務(wù)端呈現(xiàn)狀態(tài)，在客戶(hù)端啟動(dòng)

• 跟蹤、記錄和回溯整個(gè)應(yīng)用的更改

• 輕松執(zhí)行撤消和重做

Redux 創(chuàng)始人 Dan Abramov 非常仔細(xì)地為 Redux 撰寫(xiě)了詳細(xì)的文檔，同時(shí)為初階和高階的 Redux 使用者創(chuàng)建了全面的視頻教程。這些是學(xué)習(xí) Redux 非常有用的資源。

View 和 State 相結(jié)合

雖然 Redux 并不是一定要和 React 一起使用，但我們強(qiáng)烈推薦。 React 和 Redux 有很多相似的理念和特點(diǎn)：

• 函數(shù)式組合范式?—?React 由 views (純函數(shù)) 構(gòu)成，而 Redux 由 pure reducers (也是純函數(shù)) 構(gòu)成。在指定輸入組合時(shí)，輸出都是可預(yù)見(jiàn)的。

• 易于 Reason About?—?這個(gè)詞您可能聽(tīng)過(guò)很多次，但實(shí)際上是什么意思？我們將其解釋為對(duì)代碼的控制和理解 - 代碼以我們期望的方式行事，當(dāng)有問(wèn)題時(shí)，可以輕松發(fā)現(xiàn)問(wèn)題。據(jù)已有的經(jīng)驗(yàn)，React 和 Redux 會(huì)使調(diào)試更簡(jiǎn)單。由于數(shù)據(jù)流是單向的，因此跟蹤數(shù)據(jù)流（服務(wù)器響應(yīng)、用戶(hù)輸入事件）更容易，并且可以直接定位問(wèn)題發(fā)生在哪一層。

• 結(jié)構(gòu)分層?—?應(yīng)用/ Flux 架構(gòu)中的每一層都是一個(gè)純函數(shù)，具有明確的職責(zé)。為純函數(shù)編寫(xiě)測(cè)試相對(duì)容易。

• 開(kāi)發(fā)體驗(yàn)?—?在開(kāi)發(fā)過(guò)程中，諸如 Redux DevTools 之類(lèi)的開(kāi)發(fā)工具，可幫助調(diào)試和檢查應(yīng)用。

此外，您的應(yīng)用可能需要處理異步調(diào)用，例如進(jìn)行遠(yuǎn)程 API 請(qǐng)求。redux-thunk 和 redux-saga 就是用來(lái)解決這些問(wèn)題的。理解他們可能需要一些時(shí)間，因?yàn)樾枰斫夂瘮?shù)編程和生成器。建議只在有需要的時(shí)候處理它。

react-redux 是一個(gè)官方的封裝庫(kù)，非常簡(jiǎn)單易學(xué)。

預(yù)估時(shí)間: 4 days. 下面的 Egghead 課程可能有點(diǎn)耗時(shí)，但值得花時(shí)間。 學(xué)完 Redux 后，您可以嘗試將其納入已構(gòu)建好的 React 項(xiàng)目中。 Redux 是否解決了您在純 React 中遇到的一些狀態(tài)管理問(wèn)題？

學(xué)習(xí)鏈接

• Flux 主頁(yè)

• Redux 主頁(yè)

• Egghead Course?—?Redux 入門(mén)

• Egghead Course?—?使用慣用的 Redux 構(gòu)建 React 應(yīng)用

• React Redux Links

• You Might Not Need Redux

替代方案

• MobX

規(guī)則編碼—?CSS Modules

CSS（層疊樣式表）是描述 HTML 元素布局的規(guī)則。寫(xiě)好 CSS 很難。編寫(xiě)可維護(hù)和可擴(kuò)展的 CSS ，通常需要多年的經(jīng)驗(yàn)和積累。具有全局命名空間的 CSS 基本上是為 Web 文檔而設(shè)計(jì)的，并不是真正用于支持組件架構(gòu)的 Web 應(yīng)用。因此，經(jīng)驗(yàn)豐富的前端開(kāi)發(fā)人員總結(jié)了設(shè)計(jì)方法學(xué)，指導(dǎo)人們?nèi)绾螢閺?fù)雜項(xiàng)目編寫(xiě)合理的 CSS ，例如使用 SMACSS、BEM、SUIT CSS 等。

CSS 方法學(xué)所帶來(lái)的樣式封裝是由公約和綱要強(qiáng)制執(zhí)行的，打破了開(kāi)發(fā)者不遵守約定的時(shí)代。

正如您可能已經(jīng)意識(shí)到的那樣，前端生態(tài)系統(tǒng)的工具十分豐富，甚至趨于飽和，因此當(dāng)發(fā)現(xiàn)已經(jīng)有一些工具來(lái)分塊解決大規(guī)模編寫(xiě) CSS 問(wèn)題時(shí)，應(yīng)該也不會(huì)感到奇怪。 “At scale” 意味著有大量開(kāi)發(fā)人員正在開(kāi)展同一個(gè)大型項(xiàng)目，并觸及相同的樣式表。目前在 JS 中編寫(xiě) CSS 還沒(méi)有社區(qū)認(rèn)可的最佳方式 ，我們希望有一天，能像 Redux 一樣，在所有的 Flux 實(shí)現(xiàn)中出現(xiàn)贏家。目前，我們?cè)谑褂玫氖?CSS Modules 。 CSS modules 是對(duì)現(xiàn)有 CSS 的改進(jìn)，旨在解決 CSS 中全局命名空間的問(wèn)題；它允許編寫(xiě)默認(rèn)情況下的局部樣式并封裝到組件中。使用 CSS modules ，大型團(tuán)隊(duì)可以編寫(xiě)模塊化和可重用的 CSS ，而不用擔(dān)心沖突或覆蓋應(yīng)用的其他部分。不過(guò)，CSS modules 最終仍然需要編譯成瀏覽器可識(shí)別的正常全局命名空間的 CSS ，因此學(xué)習(xí)和理解原始 CSS 仍然很重要。

如果您是一個(gè) CSS 初學(xué)者，Codecademy 的 HTML & CSS 課程將是不錯(cuò)的開(kāi)始。然后，攻讀 Sass preprocessor ，這是 CSS 語(yǔ)言的擴(kuò)展，在基礎(chǔ)上增加了語(yǔ)法改進(jìn)，并鼓勵(lì)樣式可重用性。再去研究上面提到的 CSS 方法學(xué)，CSS modules 放到最后去學(xué)。

預(yù)估時(shí)間: 3–4 days. 嘗試使用 SMACSS / BEM 理論 和/或 CSS modules 來(lái)設(shè)計(jì)應(yīng)用。

學(xué)習(xí)鏈接

• Learn HTML & CSS course on Codecademy

• Intro to HTML/CSS on Khan Academy

• SMACSS

• BEM

• SUIT CSS

• CSS Modules Specification

• Sass Homepage

• 前端面試問(wèn)題答案?—?HTML ?

• 前端面試問(wèn)題答案?—?CSS ?

替代方案

• JSS

• Styled Components