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

原文連結

可能當我們結束本文時，一個新的 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 架構的伺服器端渲染。

祝您學習愉快!