您可能聽說過前端框架。像React、Vue和Angular這樣的名字在教程和黑客新聞辯論中比比皆是。如果您想知道為什么以及何時(shí)使用這些框架，以及是否該在項(xiàng)目中實(shí)現(xiàn)這些框架，那么您并不孤單。幾年前，當(dāng)我在一個(gè)輔助項(xiàng)目Hackterms上工作時(shí)，我自己的前端變得很笨拙。我對(duì)實(shí)現(xiàn)一個(gè)框架是正確的下一步有一種松散的感覺，但我對(duì)他們所做的幾乎一無所知。（我們將在文章的最后回到結(jié)果。）這是我當(dāng)時(shí)希望得到的解釋。在這篇文章中，我們將鳥瞰前端框架試圖解決的問題以及您何時(shí)可能需要使用它。

具體來說，我們將回顧：

1. 前端如何增長。 

2. 在擴(kuò)展時(shí)可能會(huì)遇到的體系結(jié)構(gòu)問題。

3. 前端框架如何幫助解決這些問題。 

4. 您可能會(huì)考慮的其他替代方案。

簡(jiǎn)而言之：“前端框架”是一個(gè)復(fù)合形容詞，因此有一個(gè)連字符。但是，你的應(yīng)用程序有一個(gè)“前端”名詞，沒有連字符。

要查看的一些術(shù)語

我們將討論一些前端框架（您可能已經(jīng)從標(biāo)題中得到了一些提示），因此讓我們?cè)谕豁撚懻撔g(shù)語：

軟件框架是一個(gè)預(yù)先編寫的應(yīng)用程序結(jié)構(gòu)，供您在其上構(gòu)建。實(shí)際上，它是一個(gè)文件和目錄的集合，您可以將自己的代碼和文件添加到其中?？蚣苤荚谕ㄟ^解決常見的開發(fā)問題來幫助您更快地構(gòu)建應(yīng)用程序，通常從以下幾個(gè)方面開始：

• 樣板代碼，涵蓋大多數(shù)應(yīng)用程序重用的功能。

• 一種目錄結(jié)構(gòu)，通常遵循一種設(shè)計(jì)理念。

• 您的應(yīng)用程序類型經(jīng)常遇到的一組設(shè)計(jì)原則。執(zhí)行這些原則的框架，如RubyonRails，通常被稱為固執(zhí)己見。
  

前端是應(yīng)用程序的表示層。它通常被描述為用戶看到的所有東西，但更一般地說，它是負(fù)責(zé)高效地向用戶顯示數(shù)據(jù)的任何代碼。因此，前端包括構(gòu)建直觀和愉快的界面，以及有效地存儲(chǔ)、呈現(xiàn)和更新從后端或API接收的數(shù)據(jù)。

前端框架是構(gòu)建前端的腳手架。它通常包括一些方法來構(gòu)造文件（例如，通過組件或CSS預(yù)處理器）、發(fā)出AJAX請(qǐng)求、設(shè)置組件樣式以及將數(shù)據(jù)與DOM元素關(guān)聯(lián)。

不斷增長的應(yīng)用程序

您可以用三個(gè)文件構(gòu)建一個(gè)簡(jiǎn)單的前端：HTML、CSS和JavaScript。但是，隨著應(yīng)用程序的擴(kuò)展，您的文件也會(huì)隨之增長，充滿了難以理解和維護(hù)。

按照傳統(tǒng)，讓我們看一個(gè)愚蠢的例子：假設(shè)您正在構(gòu)建MySquare，一個(gè)面向有競(jìng)爭(zhēng)力的棋盤游戲玩家的排行榜。在這個(gè)應(yīng)用程序中，用戶可以分享他們玩過的棋盤游戲，他們的聯(lián)盟認(rèn)可的競(jìng)爭(zhēng)結(jié)果（現(xiàn)在有一個(gè)聯(lián)盟，名列前茅），以及對(duì)競(jìng)爭(zhēng)對(duì)手的簡(jiǎn)短評(píng)論。應(yīng)用程序最重要的功能是用戶配置文件頁面：

您將使用三種基本技術(shù)（HTML、CSS和JavaScript）構(gòu)建此概要文件頁面的第一個(gè)版本。它的工作原理如下：

• 在初始頁面加載時(shí)，后端最初以最小的樣式發(fā)送空白配置文件頁面。然后，對(duì)于所有將來的加載，前端通過AJAX請(qǐng)求用戶數(shù)據(jù)。

• 后端以JSON的形式發(fā)送一些公共用戶數(shù)據(jù)，您可以使用JavaScript將游戲徽章和記錄的DOM元素動(dòng)態(tài)附加到頁面上。

• 當(dāng)您決定構(gòu)建列出所有用戶及其記錄的特定于游戲的頁面時(shí)，創(chuàng)建新的JavaScript文件，復(fù)制大部分代碼，因?yàn)樗鼈兪腔谙嗤挠螒驍?shù)據(jù)繪制的。

• 每個(gè)游戲徽章（和比賽徽章）使用相同的HTML，因此將標(biāo)記存儲(chǔ)在JavaScript字符串中，并找出將特定于游戲的數(shù)據(jù)注入其中的方法，例如：“<p>{{Game Name}}</p>”。然后，您將每個(gè)游戲的徽章HTML附加到頁面上。

• 當(dāng)用戶更新頁面上的某些值時(shí)，您可以通過查詢屬性從DOM讀取數(shù)據(jù)，或者通過將事件偵聽器附加到每個(gè)元素，通過從DOM讀取數(shù)據(jù)來獲取數(shù)據(jù)。
  

隨著MySquare的流行和數(shù)據(jù)集的增長，這種方法很快就會(huì)變得難以使用：

• 您發(fā)現(xiàn)自己將數(shù)據(jù)附加到頁面，然后通過抓取值或讀取id或數(shù)據(jù)屬性從DOM中讀取數(shù)據(jù)。

• JavaScript和CSS文件氣球的數(shù)量，它們之間有許多重復(fù)的代碼。

• 您將事件偵聽器綁定到常見的UI元素，如輸入字段和按鈕，然后編寫函數(shù)來更新這些元素中的值。

• 當(dāng)您需要進(jìn)行哪怕是很小的更改時(shí)，您擔(dān)心它將如何影響應(yīng)用程序的其余部分。

• 當(dāng)您的朋友提出幫助您進(jìn)行開發(fā)工作時(shí)（當(dāng)然是為了公平起見），您會(huì)花費(fèi)數(shù)小時(shí)來解釋代碼的工作方式。

管理這些問題是可行的香草JavaScript和足夠的耐心。有了計(jì)劃和先見之明，你也許可以構(gòu)建你的應(yīng)用程序來預(yù)測(cè)其中的一些問題。然而，隨著前端的增長，這些問題只會(huì)加深，您永遠(yuǎn)無法確定應(yīng)用程序?qū)⑷绾伟l(fā)展。

您意識(shí)到，將數(shù)據(jù)存儲(chǔ)在DOM中并無限地附加存儲(chǔ)在JavaScript字符串中的HTML并不是處理此項(xiàng)目的最佳方法。

輸入，框架

前端框架的存在是因?yàn)閷?duì)于許多應(yīng)用程序來說，前端以可預(yù)測(cè)的方式增長和緊張。雖然每個(gè)流行的框架都提供了自己的設(shè)計(jì)理念，但它們都試圖解決我們之前遇到的一般問題：

• 您的代碼應(yīng)該是可維護(hù)的：便于您和其他人閱讀、測(cè)試和更改。

• 復(fù)雜的接口通常由相同的組件組成。您應(yīng)該能夠創(chuàng)建和重用這些組件，以便輕松地創(chuàng)建新頁面。

• 由于DOM操作很慢，您希望執(zhí)行盡可能少的元素更新。

• 您應(yīng)該能夠輕松地基于數(shù)據(jù)操作UI。

• 您的UI應(yīng)該是一致和直觀的；這意味著標(biāo)準(zhǔn)化排版、顏色和，按鈕、輸入和其他元素。

• 在解決這些常見的前端難題時(shí)，您不需要重新設(shè)計(jì)輪子和編寫大量的樣板文件。

• 您應(yīng)該有一種通用語言，通過它與其他開發(fā)人員交流您的想法和模式。

不同的框架解決了其中的一些問題，但通常不是全部。一些，比如Bootstrap和SemanticUI，專注于創(chuàng)建可讀的、可維護(hù)的HTML和CSS，強(qiáng)調(diào)一致的視覺設(shè)計(jì)。其他的，如Vue、React和Angular，則擅長在整個(gè)應(yīng)用程序中構(gòu)建數(shù)據(jù)流，使您能夠?qū)Ｗ⒂诓僮鲾?shù)據(jù)而不是DOM。

如果實(shí)現(xiàn)一個(gè)流行的前端框架，比如React，MySquare會(huì)是什么樣子？以下是您可能會(huì)經(jīng)歷的一些變化：

1. 您可以創(chuàng)建可重用的HTML/CSS/JavaScript組件，其中包含游戲徽章、比賽記錄和其他公共元素的數(shù)據(jù)占位符。然后，框架將根據(jù)傳入的數(shù)據(jù)（我們從服務(wù)器或api獲得的JSON）呈現(xiàn)這些元素。例如，如果JSON有九個(gè)游戲記錄，我們將呈現(xiàn)九個(gè)組件，并自動(dòng)插入匹配數(shù)據(jù)。

2. 您將按照樣板目錄結(jié)構(gòu)創(chuàng)建組件、腳本和樣式表，以便于遵循和維護(hù)。需要改變游戲記錄的結(jié)構(gòu)和樣式嗎？找到小型的、獨(dú)立的組件并進(jìn)行更改。

3. 您將能夠利用最新的JavaScript功能以及類似SASS的CSS預(yù)處理器來編寫簡(jiǎn)潔、富有表現(xiàn)力的現(xiàn)代代碼。這個(gè)框架將把它轉(zhuǎn)換成瀏覽器可以理解的HTML/CSS/JavaScript。

4. 有了這個(gè)基礎(chǔ)設(shè)施，您可以集中精力處理數(shù)據(jù)，而不用擔(dān)心DOM。我們框架的數(shù)據(jù)綁定特性將在數(shù)據(jù)更改時(shí)自動(dòng)重新呈現(xiàn)相關(guān)組件。例如，如果您從服務(wù)器接收到有關(guān)新匹配結(jié)果的數(shù)據(jù)，框架將自動(dòng)將另一個(gè)組件附加到屏幕上。

5. 如果您發(fā)現(xiàn)自己遇到問題，可以利用框架社區(qū)獲得幫助。解釋問題應(yīng)該更容易，因?yàn)槟裱目蚣軕T例有助于構(gòu)建流行的前端功能。

6. 因?yàn)榱餍械目蚣芡ǔＷ裱愃频脑O(shè)計(jì)原則，所以與其他開發(fā)人員協(xié)作會(huì)更容易，即使是那些不在您的特定框架中開發(fā)的人，您也不需要讓新開發(fā)人員了解您自己的自定義代碼結(jié)構(gòu)。

關(guān)注點(diǎn)分離

理想情況下，您希望前端作為一個(gè)獨(dú)立的應(yīng)用程序運(yùn)行，從后端請(qǐng)求數(shù)據(jù)、處理并顯示數(shù)據(jù)（您可能會(huì)聽到這種說法稱為“使用API”）。支持這一點(diǎn)的原則被稱為“關(guān)注點(diǎn)分離”，它指出程序的每個(gè)部分都應(yīng)該獨(dú)立運(yùn)行，有明確的單一目的，并通過定義良好的接口進(jìn)行通信。盡管您的前端不必實(shí)現(xiàn)一個(gè)框架來遵循關(guān)注點(diǎn)分離原則，但大多數(shù)框架都支持這種架構(gòu)模式。

由此產(chǎn)生的模塊化設(shè)計(jì)的優(yōu)點(diǎn)是，開發(fā)人員可以獨(dú)立地處理應(yīng)用程序的不同部分，只要他們的組件接受可預(yù)測(cè)的輸入并提供可預(yù)測(cè)的輸出。擁有一個(gè)具有單一職責(zé)的前端（由遵循相同原則的模塊化組件組成）使其易于適應(yīng)變化。例如，如果您決定從Angular轉(zhuǎn)移到React，您可以自信地這樣做；兩個(gè)框架都希望從后端獲得數(shù)據(jù)，因此您可以關(guān)注React的接口如何接收數(shù)據(jù)以及如何使用數(shù)據(jù)，而不是前端如何嵌入到更大的應(yīng)用程序中。

作為應(yīng)用程序的專用視圖層，前端應(yīng)全權(quán)負(fù)責(zé)以下方面的邏輯：

• 哪些元素應(yīng)該顯示或隱藏

• 何時(shí)請(qǐng)求數(shù)據(jù)或?qū)⒏掳l(fā)送到服務(wù)器

• 何時(shí)顯示簡(jiǎn)單的驗(yàn)證和錯(cuò)誤消息

• 根據(jù)數(shù)據(jù)做出哪些樣式選擇

這里有兩個(gè)MySquare場(chǎng)景：一個(gè)是架構(gòu)遵循關(guān)注點(diǎn)分離，另一個(gè)是違反關(guān)注點(diǎn)分離。看看你能不能找出哪個(gè)是哪個(gè)！

1. 后端發(fā)送一個(gè)游戲記錄列表；每個(gè)記錄包含一個(gè)分?jǐn)?shù)、兩個(gè)玩家的名字和比賽日期。前端為每場(chǎng)比賽附加一個(gè)HTML組件，根據(jù)誰贏了比賽，背景顏色為紅色或綠色。

2. 后端發(fā)送一個(gè)游戲記錄列表；每個(gè)記錄包含一個(gè)分?jǐn)?shù)、兩個(gè)玩家的姓名、比賽日期和一個(gè)用于贏/輸比賽樣式的顏色十六進(jìn)制代碼，根據(jù)請(qǐng)求代碼的配置文件計(jì)算。前端為每個(gè)匹配添加一個(gè)組件，用后端發(fā)送的背景色設(shè)置樣式。

你抓到違規(guī)行為了嗎？后端不應(yīng)該與樣式有關(guān)。這種邏輯應(yīng)該存在于前端，它決定了數(shù)據(jù)的顯示方式。如果你的設(shè)計(jì)師想要美化MySquare的設(shè)計(jì)，他們不必?fù)?dān)心數(shù)據(jù)結(jié)構(gòu)。

使用框架的優(yōu)點(diǎn)

讓我們回顧一下采用前端框架將有助于我們快速增長的應(yīng)用程序的主要方式：

1. 可維護(hù)性：將應(yīng)用程序分解為可重用的獨(dú)立組件，可以更輕松地進(jìn)行快速更改，而不會(huì)影響應(yīng)用程序的其余部分。

2. 關(guān)注點(diǎn)分離：現(xiàn)代框架設(shè)計(jì)鼓勵(lì)可維護(hù)的模塊化體系結(jié)構(gòu)，并允許前端開發(fā)人員專注于他們最擅長的方面：以直觀高效的方式獲取數(shù)據(jù)并將其顯示給用戶。

3. 速度：針對(duì)常見問題的樣板代碼使應(yīng)用程序更容易啟動(dòng)和運(yùn)行；基于組件的設(shè)計(jì)使開發(fā)更快。

4. 協(xié)作：由于框架通常遵循類似的設(shè)計(jì)模式，新加入您的代碼庫的開發(fā)人員更容易開發(fā)和維護(hù)您的應(yīng)用程序。

5. 社區(qū)：流行框架有一個(gè)社區(qū)，周圍有專門的教程、論壇、會(huì)議，一般支持您的開發(fā)人員，您可以向他們尋求幫助。

缺點(diǎn)和替代方案

當(dāng)然，與任何工具一樣，前端框架并不總是適合您的應(yīng)用程序。在實(shí)施之前，需要考慮以下幾個(gè)因素。

缺點(diǎn)

1. 抽象的開銷代碼：在您完全熟悉它之前，框架代碼是一個(gè)黑匣子。很難辨別代碼中有多少對(duì)您的應(yīng)用程序有幫助，也很難修復(fù)由您不熟悉的代碼導(dǎo)致的錯(cuò)誤。

2. 學(xué)習(xí)曲線：學(xué)習(xí)如何有效地使用框架需要時(shí)間。為了提高效率，您需要理解框架如何工作背后的語法、工具和原理。對(duì)于速度至關(guān)重要的項(xiàng)目，學(xué)習(xí)一項(xiàng)全新的技術(shù)可能不是最好的利用時(shí)間的方法。

3. 對(duì)于較小的項(xiàng)目，過度使用：如果您希望部署一個(gè)靜態(tài)站點(diǎn)或每個(gè)組件都是唯一的站點(diǎn)，您可能不需要完整框架的強(qiáng)大功能和開銷。實(shí)現(xiàn)一個(gè)最小的框架甚至庫可能還是有幫助的，我們將在下一節(jié)討論這些問題。

4. 設(shè)置：根據(jù)您的特定用例設(shè)置和定制框架需要時(shí)間。如果速度是必要的，那么就按照你所知道的去做，或者按照你的開發(fā)團(tuán)隊(duì)所熟悉的去做。

5. 強(qiáng)烈的意見：一個(gè)固執(zhí)己見的框架可能會(huì)讓人感到壓抑，它的設(shè)計(jì)原則可能會(huì)與你的沖突。一定要研究你正在實(shí)現(xiàn)的特定框架。如果您喜歡從頭開始構(gòu)建，請(qǐng)使用您自己的解決方案。

6. 生態(tài)系統(tǒng)演化：JavaScript框架生態(tài)系統(tǒng)是出了名的不穩(wěn)定的?，F(xiàn)在最熱門的框架明年可能不會(huì)流行，隨著這種轉(zhuǎn)變，開發(fā)人員和支持可能很難找到。

替代品

除了Vue、React和Angular等大型JavaScript框架之外，還有一些替代方案。正如我們前面提到的，不同的前端框架試圖解決不同的問題。根據(jù)您的需要，較小的框架和庫可能適合您。此外，您可以放棄關(guān)注點(diǎn)的分離，使用帶有服務(wù)器端呈現(xiàn)視圖的monolith全棧應(yīng)用程序。這里有一些可供考慮的替代方案：

模板化引擎：如果您只需要可重用組件，請(qǐng)考慮像這樣的模板化引擎車把.js，EJS公司，下劃線.js，或胡須。這些引擎允許您存儲(chǔ)HTML/CSS/JavaScript組件并將JavaScript變量插入其中。我在本文開頭提到了如何擴(kuò)展我的項(xiàng)目Hackterms?；叵肫饋?，我絕對(duì)應(yīng)該使用一個(gè)成熟的框架。然而，當(dāng)時(shí)我時(shí)間和耐心都不夠，所以我成功地使用了把手來創(chuàng)建可重用的模板。

CSS框架和庫：如果您希望創(chuàng)建一致的UI，Bootstrap、SemanticUI、Bulma或Tailwind等工具可能是一個(gè)不錯(cuò)的選擇。有人曾經(jīng)把使用CSS框架描述為“讓一個(gè)設(shè)計(jì)師在你身后看著你，推動(dòng)你走向好的實(shí)踐?！蹦悴槐乩^承這些框架的視覺設(shè)計(jì)，但是對(duì)于一個(gè)沒有強(qiáng)大設(shè)計(jì)背景的開發(fā)人員來說，知道要使用多少種字體，不同的按鈕狀態(tài)，以及直觀的形式是什么樣子。

全棧monolith應(yīng)用程序：許多全?？蚣?，如Ruby on Rails，流星.js，和Django，都有自己的模板引擎，在服務(wù)器上呈現(xiàn)HTML。服務(wù)器端呈現(xiàn)和monolith體系結(jié)構(gòu)都是值得自己發(fā)表博文的概念，但您可以將此選項(xiàng)視為為為整個(gè)應(yīng)用程序選擇一個(gè)完整的堆棧框架，并在單個(gè)代碼庫中編寫表示層和服務(wù)器邏輯。大多數(shù)全?？蚣艽_實(shí)允許您插入自己選擇的前端框架，但默認(rèn)情況下您使用自己的模板引擎。如果您想在整個(gè)應(yīng)用程序中使用單一框架，這是一個(gè)很好的解決方案；它也可以作為一個(gè)快速的方法來原型化一個(gè)完整的堆棧應(yīng)用程序。

總之

前端框架是開發(fā)復(fù)雜用戶界面的強(qiáng)大工具。它們鼓勵(lì)您構(gòu)建一個(gè)可維護(hù)的、模塊化的、獨(dú)立的體系結(jié)構(gòu)，使您可以輕松地構(gòu)建應(yīng)用程序并與其他開發(fā)人員協(xié)作。流行的框架由支持社區(qū)、豐富的文檔和教程提供支持，并提供經(jīng)過戰(zhàn)斗測(cè)試的代碼，以解決前端在擴(kuò)展時(shí)帶來的常見挑戰(zhàn)?？蚣茉试S您利用最新的JavaScript特性，并提供工具，使應(yīng)用程序原型化變得容易。最后，他們?yōu)槟峁┝艘环N共享的語言來討論您的體系結(jié)構(gòu)和挑戰(zhàn)。

前端框架和庫的形狀和大小多種多樣您可以使用成熟的UI框架構(gòu)建整個(gè)前端，實(shí)現(xiàn)CSS庫以加強(qiáng)視覺設(shè)計(jì)，或使用模板引擎創(chuàng)建可重用組件。

然而，對(duì)于較小的項(xiàng)目和原型來說，前端框架可能過于復(fù)雜，陡峭的學(xué)習(xí)曲線，再加上快速發(fā)展的JavaScript生態(tài)系統(tǒng)，使得在一個(gè)年輕的項(xiàng)目中實(shí)現(xiàn)變得困難。最后，如果您對(duì)學(xué)習(xí)經(jīng)過良好測(cè)試的設(shè)計(jì)原則感到興奮，希望前端能夠擴(kuò)展，或者在性能不是主要問題時(shí)需要快速原型化，那么您應(yīng)該實(shí)現(xiàn)一個(gè)流行的框架。如果您喜歡透徹地了解應(yīng)用程序的每一部分，或者不想學(xué)習(xí)新技術(shù)，那么這可能不是最佳選擇。

希望本概述能讓您了解前端框架解決的問題，以及它是否適合您的下一個(gè)項(xiàng)目。您對(duì)前端框架的體驗(yàn)如何？你選擇的框架是什么？期待您的評(píng)論！