[原文連結](https://dzone.com/articles/the-modern-javascript-landscape)

可能當我們結束本文時，一個新的 Javascript 框架已經在某處啟動了。但這確實不在我們的控制範圍內。因此，我們應該簡單地繼續我們所擁有的。至少，由於免責宣告，我們可以確定我們不是在發明新框架。

曾幾何時，編寫有效的前端程式碼意味著您必須很好地理解 HTML、CSS 和 JavaScript 如何融合在一起來建立網頁。好吧，幸運的是，即使在今天，這也幾乎是正確的。然而，在過去的十年中，Javascript 領域出現了爆炸式增長。由於這個原因，開發人員一直在撓頭，只是弄清楚他們應該知道什麼才能構建有效的 Web 應用程式。

在這篇文章中，我們將嘗試解開現代 Javascript 景觀的一些方面。如果您想成為一名專業的前端開發人員，我們還將研究您可能應該學習的內容。但在我們這樣做之前，讓我們從頭開始。

# JavaScript 是如何工作的？

當客戶端或瀏覽器訪問 HTML 頁面時，伺服器會發回 HTML 標記。 瀏覽器接收它並解釋標記以構造 DOM 或文件物件模型。 JavaScript 具有與 DOM 互動、修改和使其具有互動性的能力。 通常，JavaScript 使用指令碼標籤包含在您的 DOM 中。

現在，問題是 JavaScript 執行阻塞了 DOM。 這意味著使用者無法與網頁進行太多互動。 換句話說，JavaScript 執行的時間越長，您的 Web 應用程式的響應速度就越慢。 這就是 AJAX 或非同步 JavaScript 和 XML 的用武之地。大多數閃亮的新 JavaScript 框架也用它來。

# 為什麼要使用框架？

完全可以在不使用任何框架的情況下構建 Web 應用程式。但現代 JavaScript 版圖發展如此之快並非沒有原因。在過去的十年中，很明顯，使用純 JavaScript 編寫複雜的應用程式極其複雜。

現代 JavaScript 框架的目標是減少構建互動式和使用者友好的 Web 應用程式所需的繁瑣和重複工作量。可以說，無論語言如何，大多數框架都試圖做同樣的事情。但是，其他程式語言可能沒有那麼多框架。另一方面，現代 JavaScript 領域實際上有數百個框架和庫。這些庫或框架中的每一個都試圖解決一組特定的問題。

然而，大多數主要框架都試圖解決一個常見的用例：如何構建能夠支援複雜使用者互動並在前端或客戶端管理應用程式狀態和業務邏輯的單頁 Web 應用程式。

簡而言之，單頁應用程式或 SPA 是可以在客戶端上執行而無需不斷重新載入頁面的 Web 應用程式。

# Steps to Conquer the Modern JavaScript Landscape

讓我們假設您是一個完整的新手。 你想開始學習前端開發並有一天成為一名專業人士。

你必須學習很多！ 沒有其他方法可以表達它。 當然，這是一段漫長而曲折的旅程。

但是，為了簡單起見，我將旅程分為幾個階段。 這些階段可以幫助您掌握現代 JavaScript 環境。

## 第一階段

### 學習 HTML

無論您使用什麼框架，HTML 和 CSS 幾乎總是存在。 所以不要試圖繞過它們。 您應該學習如何建立 HTML 頁面，現在將頁面劃分為多個部分。 專注於適當的結構，暫時不要擔心頁面美化部分。

### 學習 CSS

CSS 或層疊樣式表為醜陋的 HTML 頁面增添了美感。 儘可能多地學習。 它很大，有很多選擇，你總能找到新的東西。 如果你想要一個列表，那麼學習 CSS 網格佈局、Flexbox、媒體查詢和響應式 CSS。 這些東西將幫助您進行認真的 Web 開發。 另外，我建議至少學習一個 CSS 框架。 如果您不確定要選擇什麼，我會推薦 Bootstrap。 它將幫助您使用較少的 CSS 和一些好的設計模式構建專業的 Web 應用程式。

# 學習 JavaScript 基礎

考慮到一旦開始使用框架就不會編寫普通的 JavaScript，這聽起來可能有悖常理。 但是，學習基礎知識將使您以後受益匪淺。 此時，您可能會遇到一種叫做 jQuery 的東西。

但是冒著疏遠社群中某些開發人員的風險，我建議您只有在有大量時間的情況下才學習它。 jQuery（一個使 DOM 操作更容易的庫）曾經統治著 JavaScript 世界。 但是，現在它在新專案中的使用率並不高，對於您的時間來說可能沒有那麼多的附加值。

現在，無論您將來做什麼，第 1 階段都將相同。 如果你走到這一步，你應該為成功而拍拍自己的背，並反省你是否想繼續。

## 第二階段

### 學習 git 基礎

現在，雖然這不是學習 JavaScript 的強制性要求，但這將幫助您向其他開發人員和 GitHub 等網站上可用的社群學習。 您還可以將您的原始碼放在 GitHub 上供所有人檢視並圍繞您自己的工作建立一個社群。

### 學習一個包管理器

任何嚴肅的現代 JavaScript 框架都至少需要了解一些包管理器。 包管理器只是管理應用程式將使用的各種依賴項的一種方式。 不幸的是，普通的 JavaScript 並沒有很多庫，但是由於開發人員釋出了各種庫和包，整個生態系統得到了極大的發展。 包管理器幫助我們利用所有這些程式碼，這樣我們就不必編寫已經存在的東西。

如果你只有時間學習一個，我會推薦 npm 或節點包管理器。 npm 是最大和使用最廣泛的包管理器； 你可以在這裡探索。

另一種選擇是 Yarn——如果你瞭解一個包管理器，你就不會發現學習其他包管理器非常困難。

### 做出選擇 - 學習哪一個 JavaScript 框架？

有很多，但為了便於討論，我將列出三個主要的。沒有特定的順序，它們是 React、Angular 和 Vue。

React 是 Facebook 構建的 JavaScript 庫。該庫可用於建立互動式 UI。簡單地基於數字，React 是當今開發人員中最受歡迎的，因為 React 非常容易學習。但是，如果您開始將 Redux 之類的高階東西混入其中，則很難掌握。

Angular 是一個 JavaScript 框架（或平臺），可用於構建 Web 應用程式。如果將 Angular 與 React 進行比較，就可以說它是一隻 1000 磅的大猩猩。對於新手來說，這可能會讓人不知所措，但是一旦您透過了最初的學習曲線，您就會發現自己處於平流層中，感到頭暈目眩。順便說一下，Angular 是由 Google 構建和維護的，因此您可以判斷其質量。

Vue 是另一個流行的框架，它顯然試圖在 React 和 Angular 之間找到中間線。除非您有一個只能透過 Vue 解決的非常具體的需求，否則我建議您使用 Angular 或 React。

話雖如此，我通常不喜歡支援一個框架而不是另一個。一名優秀的開發人員可以根據問題選擇框架或工具集。 React 和 Angular 都可以做任何事情，但它們在某些事情上做得比其他事情好。例如，Angular 中的表單處理非常出色，對於在填寫內容方面具有大量使用者互動的企業應用程式來說非常有用。另一方面，如果你有一個非常動態的 DOM 並且想要基於使用者互動進行大量操作，React 是非常棒的。

在我看來，我建議如果您有時間，您應該嘗試同時學習兩者。它會開啟你的視野，讓你成為更好的前端開發人員。

## 第三階段

如果你已經達到了這一點，你就已經走得很遠了。你應該為自己感到自豪。

然而，旅程並沒有結束。

正如我們之前談到的，現代 JavaScript 環境正在迅速發展。如果 Web 開發人員想保持相關性，他們也應該這樣做。甚至框架也在迅速發展。谷歌每年釋出兩次具有新功能的新 Angular 版本。 React 生態系統正在迅速擴充套件。還有其他框架正在出現，誰知道其中一些是否會變得更加流行。

所以應該繼續學習。您可以檢視的一些內容是：

* 漸進式 Web 應用程式使 Web 應用程式像原生移動應用程式一樣工作。
* 工具框架，如 Webpack 和 Babel。
* ES6、ES7 語法
* 各種測試框架，如 Jest、Karma 和 Mocha。
* 如果您對使用 JavaScript 構建移動應用程式感興趣，您可以研究 React Native、Flutter 等。
* 使用 SPA 框架的伺服器端渲染。

祝您學習愉快!

為什麼 Web 開發人員需要學習一個 JavaScript 框架？

相關文章