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

具體來說，我們將回顧：

1. 前端如何增長。 

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

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

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

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

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

我們將討論一些前端框架（您可能已經(jīng)從標(biāo)題中得到了一些提示），因此讓我們在同一頁討論術(shù)語：

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

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

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

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

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

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

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

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

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

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

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

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

• 當(dāng)您決定構(gòu)建列出所有用戶及其記錄的特定于游戲的頁面時，創(chuàng)建新的JavaScript文件，復(fù)制大部分代碼，因為它們是基于相同的游戲數(shù)據(jù)繪制的。

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

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

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

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

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

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

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

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

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

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

輸入，框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. 因為流行的框架通常遵循類似的設(shè)計原則，所以與其他開發(fā)人員協(xié)作會更容易，即使是那些不在您的特定框架中開發(fā)的人，您也不需要讓新開發(fā)人員了解您自己的自定義代碼結(jié)構(gòu)。

關(guān)注點分離

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

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

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

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

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

• 何時顯示簡單的驗證和錯誤消息

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

這里有兩個MySquare場景：一個是架構(gòu)遵循關(guān)注點分離，另一個是違反關(guān)注點分離?？纯茨隳懿荒苷页瞿膫€是哪個！

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

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

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

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

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

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

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

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

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

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

缺點和替代方案

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

缺點

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

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

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

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

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

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

替代品

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

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

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

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

總之

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

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

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

希望本概述能讓您了解前端框架解決的問題，以及它是否適合您的下一個項目。您對前端框架的體驗如何？你選擇的框架是什么？期待您的評論！