原文鏈接

可能當(dāng)我們結(jié)束本文時(shí)，一個(gè)新的 Javascript 框架已經(jīng)在某處啟動(dòng)了。但這確實(shí)不在我們的控制范圍內(nèi)。因此，我們應(yīng)該簡(jiǎn)單地繼續(xù)我們所擁有的。至少，由于免責(zé)聲明，我們可以確定我們不是在發(fā)明新框架。

曾幾何時(shí)，編寫有效的前端代碼意味著您必須很好地理解 HTML、CSS 和 JavaScript 如何融合在一起來(lái)創(chuàng)建網(wǎng)頁(yè)。好吧，幸運(yùn)的是，即使在今天，這也幾乎是正確的。然而，在過(guò)去的十年中，Javascript 領(lǐng)域出現(xiàn)了爆炸式增長(zhǎng)。由于這個(gè)原因，開發(fā)人員一直在撓頭，只是弄清楚他們應(yīng)該知道什么才能構(gòu)建有效的 Web 應(yīng)用程序。

在這篇文章中，我們將嘗試解開現(xiàn)代 Javascript 景觀的一些方面。如果您想成為一名專業(yè)的前端開發(fā)人員，我們還將研究您可能應(yīng)該學(xué)習(xí)的內(nèi)容。但在我們這樣做之前，讓我們從頭開始。

JavaScript 是如何工作的？

當(dāng)客戶端或?yàn)g覽器訪問(wèn) HTML 頁(yè)面時(shí)，服務(wù)器會(huì)發(fā)回 HTML 標(biāo)記。 瀏覽器接收它并解釋標(biāo)記以構(gòu)造 DOM 或文檔對(duì)象模型。 JavaScript 具有與 DOM 交互、修改和使其具有交互性的能力。 通常，JavaScript 使用腳本標(biāo)簽包含在您的 DOM 中。

現(xiàn)在，問(wèn)題是 JavaScript 執(zhí)行阻塞了 DOM。 這意味著用戶無(wú)法與網(wǎng)頁(yè)進(jìn)行太多交互。 換句話說(shuō)，JavaScript 執(zhí)行的時(shí)間越長(zhǎng)，您的 Web 應(yīng)用程序的響應(yīng)速度就越慢。 這就是 AJAX 或異步 JavaScript 和 XML 的用武之地。大多數(shù)閃亮的新 JavaScript 框架也用它來(lái)。

為什么要使用框架？

完全可以在不使用任何框架的情況下構(gòu)建 Web 應(yīng)用程序。但現(xiàn)代 JavaScript 版圖發(fā)展如此之快并非沒有原因。在過(guò)去的十年中，很明顯，使用純 JavaScript 編寫復(fù)雜的應(yīng)用程序極其復(fù)雜。

現(xiàn)代 JavaScript 框架的目標(biāo)是減少構(gòu)建交互式和用戶友好的 Web 應(yīng)用程序所需的繁瑣和重復(fù)工作量。可以說(shuō)，無(wú)論語(yǔ)言如何，大多數(shù)框架都試圖做同樣的事情。但是，其他編程語(yǔ)言可能沒有那么多框架。另一方面，現(xiàn)代 JavaScript 領(lǐng)域?qū)嶋H上有數(shù)百個(gè)框架和庫(kù)。這些庫(kù)或框架中的每一個(gè)都試圖解決一組特定的問(wèn)題。

然而，大多數(shù)主要框架都試圖解決一個(gè)常見的用例：如何構(gòu)建能夠支持復(fù)雜用戶交互并在前端或客戶端管理應(yīng)用程序狀態(tài)和業(yè)務(wù)邏輯的單頁(yè) Web 應(yīng)用程序。

簡(jiǎn)而言之，單頁(yè)應(yīng)用程序或 SPA 是可以在客戶端上運(yùn)行而無(wú)需不斷重新加載頁(yè)面的 Web 應(yīng)用程序。

Steps to Conquer the Modern JavaScript Landscape

讓我們假設(shè)您是一個(gè)完整的新手。 你想開始學(xué)習(xí)前端開發(fā)并有一天成為一名專業(yè)人士。

你必須學(xué)習(xí)很多！ 沒有其他方法可以表達(dá)它。 當(dāng)然，這是一段漫長(zhǎng)而曲折的旅程。

但是，為了簡(jiǎn)單起見，我將旅程分為幾個(gè)階段。 這些階段可以幫助您掌握現(xiàn)代 JavaScript 環(huán)境。

第一階段

學(xué)習(xí) HTML

無(wú)論您使用什么框架，HTML 和 CSS 幾乎總是存在。 所以不要試圖繞過(guò)它們。 您應(yīng)該學(xué)習(xí)如何創(chuàng)建 HTML 頁(yè)面，現(xiàn)在將頁(yè)面劃分為多個(gè)部分。 專注于適當(dāng)?shù)慕Y(jié)構(gòu)，暫時(shí)不要擔(dān)心頁(yè)面美化部分。

學(xué)習(xí) CSS

CSS 或?qū)盈B樣式表為丑陋的 HTML 頁(yè)面增添了美感。 盡可能多地學(xué)習(xí)。 它很大，有很多選擇，你總能找到新的東西。 如果你想要一個(gè)列表，那么學(xué)習(xí) CSS 網(wǎng)格布局、Flexbox、媒體查詢和響應(yīng)式 CSS。 這些東西將幫助您進(jìn)行認(rèn)真的 Web 開發(fā)。 另外，我建議至少學(xué)習(xí)一個(gè) CSS 框架。 如果您不確定要選擇什么，我會(huì)推薦 Bootstrap。 它將幫助您使用較少的 CSS 和一些好的設(shè)計(jì)模式構(gòu)建專業(yè)的 Web 應(yīng)用程序。

學(xué)習(xí) JavaScript 基礎(chǔ)

考慮到一旦開始使用框架就不會(huì)編寫普通的 JavaScript，這聽起來(lái)可能有悖常理。 但是，學(xué)習(xí)基礎(chǔ)知識(shí)將使您以后受益匪淺。 此時(shí)，您可能會(huì)遇到一種叫做 jQuery 的東西。

但是冒著疏遠(yuǎn)社區(qū)中某些開發(fā)人員的風(fēng)險(xiǎn)，我建議您只有在有大量時(shí)間的情況下才學(xué)習(xí)它。 jQuery（一個(gè)使 DOM 操作更容易的庫(kù)）曾經(jīng)統(tǒng)治著 JavaScript 世界。 但是，現(xiàn)在它在新項(xiàng)目中的使用率并不高，對(duì)于您的時(shí)間來(lái)說(shuō)可能沒有那么多的附加值。

現(xiàn)在，無(wú)論您將來(lái)做什么，第 1 階段都將相同。 如果你走到這一步，你應(yīng)該為成功而拍拍自己的背，并反省你是否想繼續(xù)。

第二階段

學(xué)習(xí) git 基礎(chǔ)

現(xiàn)在，雖然這不是學(xué)習(xí) JavaScript 的強(qiáng)制性要求，但這將幫助您向其他開發(fā)人員和 GitHub 等網(wǎng)站上可用的社區(qū)學(xué)習(xí)。 您還可以將您的源代碼放在 GitHub 上供所有人查看并圍繞您自己的工作建立一個(gè)社區(qū)。

學(xué)習(xí)一個(gè)包管理器

任何嚴(yán)肅的現(xiàn)代 JavaScript 框架都至少需要了解一些包管理器。 包管理器只是管理應(yīng)用程序?qū)⑹褂玫母鞣N依賴項(xiàng)的一種方式。 不幸的是，普通的 JavaScript 并沒有很多庫(kù)，但是由于開發(fā)人員發(fā)布了各種庫(kù)和包，整個(gè)生態(tài)系統(tǒng)得到了極大的發(fā)展。 包管理器幫助我們利用所有這些代碼，這樣我們就不必編寫已經(jīng)存在的東西。

如果你只有時(shí)間學(xué)習(xí)一個(gè)，我會(huì)推薦 npm 或節(jié)點(diǎn)包管理器。 npm 是最大和使用最廣泛的包管理器； 你可以在這里探索。

另一種選擇是 Yarn——如果你了解一個(gè)包管理器，你就不會(huì)發(fā)現(xiàn)學(xué)習(xí)其他包管理器非常困難。

做出選擇 - 學(xué)習(xí)哪一個(gè) JavaScript 框架？

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

React 是 Facebook 構(gòu)建的 JavaScript 庫(kù)。該庫(kù)可用于創(chuàng)建交互式 UI。簡(jiǎn)單地基于數(shù)字，React 是當(dāng)今開發(fā)人員中最受歡迎的，因?yàn)?React 非常容易學(xué)習(xí)。但是，如果您開始將 Redux 之類的高級(jí)東西混入其中，則很難掌握。

Angular 是一個(gè) JavaScript 框架（或平臺(tái)），可用于構(gòu)建 Web 應(yīng)用程序。如果將 Angular 與 React 進(jìn)行比較，就可以說(shuō)它是一只 1000 磅的大猩猩。對(duì)于新手來(lái)說(shuō)，這可能會(huì)讓人不知所措，但是一旦您通過(guò)了最初的學(xué)習(xí)曲線，您就會(huì)發(fā)現(xiàn)自己處于平流層中，感到頭暈?zāi)垦！ｍ槺阏f(shuō)一下，Angular 是由 Google 構(gòu)建和維護(hù)的，因此您可以判斷其質(zhì)量。

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

話雖如此，我通常不喜歡支持一個(gè)框架而不是另一個(gè)。一名優(yōu)秀的開發(fā)人員可以根據(jù)問(wèn)題選擇框架或工具集。 React 和 Angular 都可以做任何事情，但它們?cè)谀承┦虑樯献龅帽绕渌虑楹谩＠?#xff0c;Angular 中的表單處理非常出色，對(duì)于在填寫內(nèi)容方面具有大量用戶交互的企業(yè)應(yīng)用程序來(lái)說(shuō)非常有用。另一方面，如果你有一個(gè)非常動(dòng)態(tài)的 DOM 并且想要基于用戶交互進(jìn)行大量操作，React 是非常棒的。

在我看來(lái)，我建議如果您有時(shí)間，您應(yīng)該嘗試同時(shí)學(xué)習(xí)兩者。它會(huì)打開你的視野，讓你成為更好的前端開發(fā)人員。

第三階段

如果你已經(jīng)達(dá)到了這一點(diǎn)，你就已經(jīng)走得很遠(yuǎn)了。你應(yīng)該為自己感到自豪。

然而，旅程并沒有結(jié)束。

正如我們之前談到的，現(xiàn)代 JavaScript 環(huán)境正在迅速發(fā)展。如果 Web 開發(fā)人員想保持相關(guān)性，他們也應(yīng)該這樣做。甚至框架也在迅速發(fā)展。谷歌每年發(fā)布兩次具有新功能的新 Angular 版本。 React 生態(tài)系統(tǒng)正在迅速擴(kuò)展。還有其他框架正在出現(xiàn)，誰(shuí)知道其中一些是否會(huì)變得更加流行。

所以應(yīng)該繼續(xù)學(xué)習(xí)。您可以查看的一些內(nèi)容是：

• 漸進(jìn)式 Web 應(yīng)用程序使 Web 應(yīng)用程序像原生移動(dòng)應(yīng)用程序一樣工作。
• 工具框架，如 Webpack 和 Babel。
• ES6、ES7 語(yǔ)法
• 各種測(cè)試框架，如 Jest、Karma 和 Mocha。
• 如果您對(duì)使用 JavaScript 構(gòu)建移動(dòng)應(yīng)用程序感興趣，您可以研究 React Native、Flutter 等。
• 使用 SPA 框架的服務(wù)器端渲染。

祝您學(xué)習(xí)愉快!

總結(jié)

以上是生活随笔為你收集整理的为什么 Web 开发人员需要学习一个 JavaScript 框架？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。