前端框架已經(jīng)經(jīng)歷了重大轉(zhuǎn)變，并且在開發(fā)人員的生活中仍然保持著相關(guān)性。但是，新框架趨勢是不是麻煩而不是便利？

現(xiàn)代的前端框架要求您下載開發(fā)環(huán)境，完整的依賴關(guān)系并編譯代碼，甚至嘗試在瀏覽器上查看它。這是一件好事嗎？是我們正在構(gòu)建更復(fù)雜的站點(diǎn)，還是框架本身很復(fù)雜，從而引入了不必要的復(fù)雜性？

自90年代以來，當(dāng)今的Web開發(fā)已經(jīng)發(fā)生了很大的變化。我們能夠創(chuàng)造出非常接近任何本機(jī)應(yīng)用程序可以完成的全部體驗(yàn)，并且開發(fā)過程也發(fā)生了變化。成為前端Web開發(fā)人員的日子已經(jīng)一去不復(fù)返了，只需打開記事本，鍵入幾行代碼，在瀏覽器中檢查它，然后將其上傳到FTP文件夾即可。

過去的前端Web開發(fā)

我必須先說一個(gè)顯而易見的事實(shí)：世界不像十年前。（我知道，這令人震驚。）唯一保持不變的是變化。過去，我們的瀏覽器很少，但是存在很多兼容性問題。如今，您看不到“ Chrome 43.4.1上的最佳視圖”之類的東西，但是在那時(shí)，這很普遍。現(xiàn)在，我們有更多的瀏覽器，但是兼容性問題更少。為什么？因?yàn)?jQuery。jQuery滿足了需要一個(gè)標(biāo)準(zhǔn)的公共庫的需要，該庫允許您編寫用于操作DOM的JavaScript代碼，而不必?fù)?dān)心它將在每個(gè)瀏覽器和每個(gè)版本的瀏覽器上運(yùn)行的方式–這在2000年代真是一場噩夢。

現(xiàn)代瀏覽器可以將DOM作為標(biāo)準(zhǔn)進(jìn)行操作，因此近年來對此類庫的需求已大大減少。不再需要jQuery   ，但是我們?nèi)匀豢梢哉业皆S多依賴它的非常有用的插件。換句話說，Web框架可能不是必需的，但是它們?nèi)匀蛔銐蛴杏?，可以流行和廣泛使用。從React，Angular，Vue和Ember到樣式和格式設(shè)置模型（如Bootstrap），這是大多數(shù)流行Web框架共有的特征。

人們?yōu)槭裁词褂每蚣?/strong>

與生活中的Web開發(fā)一樣，快速解決方案總是很方便的。您以前用JavaScript做過路由器嗎？當(dāng)您可以npm-install前端框架來克服此問題時(shí)，為什么要經(jīng)歷痛苦的學(xué)習(xí)過程？如果客戶希望昨天完成工作， 或者您從另一個(gè)為特定框架設(shè)計(jì)的開發(fā)人員那里繼承代碼，或者如果您正在與已經(jīng)使用給定框架的團(tuán)隊(duì)進(jìn)行集成，那么時(shí)間就是一種奢侈 。面對現(xiàn)實(shí)吧，框架確實(shí)存在是有原因的。如果對他們沒有好處，那么沒人會(huì)使用它們。

那么使用Web開發(fā)框架有哪些好處和獨(dú)特的屬性呢？

時(shí)間就是金錢。 當(dāng)您開發(fā)項(xiàng)目時(shí)，客戶不在乎您使用哪個(gè)框架（實(shí)際上，甚至可能都不知道所使用的框架），他們只在乎獲得結(jié)果，而且速度越快越好。建立的框架使您能夠從一開始就獲得即時(shí)的進(jìn)步感，這是客戶從第一天開始就渴望的。此外，開發(fā)速度越快，您賺到的錢就越多，因?yàn)榭蚣茚尫诺臅r(shí)間可以重定向到承擔(dān)更多的工作項(xiàng)目。

這一切都與社區(qū)有關(guān)。 在選擇框架時(shí)，這是非常重要的一點(diǎn)-當(dāng)您遇到問題時(shí)誰能為您提供幫助？您和我都知道它會(huì)在某個(gè)時(shí)候發(fā)生。您將到達(dá)一個(gè)地方，需要做一些框架不希望做的事情，或者框架從來沒有設(shè)計(jì)給您提供訪問權(quán)限，因此擁有一個(gè)社區(qū)來支持您至關(guān)重要。沉浸在虛擬世界中，并且如果您是唯一的前端Web開發(fā)人員，則開發(fā)工作（尤其是自由職業(yè)者）可能會(huì)很難  在一個(gè)團(tuán)隊(duì)中，這意味著您是唯一擁有找到解決方案的經(jīng)驗(yàn)和專業(yè)知識的人。但是，如果您使用的前端框架有可靠的支持，那么世界另一端將面臨著同樣的問題，并且可能會(huì)為您提供幫助。

標(biāo)準(zhǔn)是美麗的。 您是否曾經(jīng)注意到，當(dāng)您查看自己的舊代碼片段時(shí)，可以很輕松地瀏覽它嗎？或者至少比其他人編寫的一段代碼更容易？您以某種方式進(jìn)行思考，并且擁有自己的命名方式和組織代碼的方式。這是一個(gè)標(biāo)準(zhǔn)。即使他們只是為了我們自己，我們都會(huì)跟隨他們。我們傾向于在早餐時(shí)吃類似的東西，在某個(gè)小時(shí)醒來，然后每天將鑰匙放在同一位置。的確，如果我們每天都改變常規(guī)，光是從弄清楚如何做事的開銷上，生活就會(huì)變得困難得多。是否曾經(jīng)因?yàn)閷㈣€匙放在與正常人不同的地方而丟失了鑰匙？標(biāo)準(zhǔn)使生活更輕松。作為團(tuán)隊(duì)或開發(fā)人員社區(qū)的一部分時(shí)，它們絕對不可或缺。

框架從安裝開始就提供了標(biāo)準(zhǔn)，指導(dǎo)您以特定方式進(jìn)行思考和編碼。您無需花費(fèi)時(shí)間與團(tuán)隊(duì)一起建立標(biāo)準(zhǔn)。您只需遵循框架中的工作方式即可。這樣可以更輕松地一起工作。當(dāng)您知道某個(gè)功能必須在某個(gè)文件中時(shí)，查找該功能會(huì)更容易，因?yàn)樗菫樵赟PA中添加路由而構(gòu)建的，并且在您的框架中，所有路由都以該名稱放置在文件中。如果您具有這種標(biāo)準(zhǔn)化水平，那么具有不同技能水平的人們可以一起工作，因?yàn)楸M管高級編碼人員知道 這樣做的原因 ，但即使是初級開發(fā)人員也可以遵循標(biāo)準(zhǔn)。

當(dāng)框架失敗時(shí)

幾年前，說出“我不使用框架-我看不到框架有什么真正的好處”之類的話，就會(huì)把拿著火把和干草叉的人帶到你家。但是今天，越來越多的人問自己：“為什么我應(yīng)該完全使用框架？我真的需要它們嗎？難道 是 很難的代碼，而他們呢？”

我當(dāng)然是其中之一-我從不喜歡任何特定框架，并且在我整個(gè)職業(yè)生涯中一直在沒有它們的情況下進(jìn)行編碼。如果我對此有選擇，我的選擇永遠(yuǎn)是“不，謝謝”。多年來，我一直在使用JavaScript和ActionScript進(jìn)行開發(fā)。當(dāng)大多數(shù)人已經(jīng)認(rèn)為它已經(jīng)死了時(shí)，我正在用Flash進(jìn)行編碼。（我知道，我知道...但是我做了很多動(dòng)畫，并且純HTML動(dòng)畫很難。）因此，如果您是從未考慮過不使用 框架進(jìn)行編碼的眾多人中的一員，那么讓我向您展示一些您可能會(huì)想到的 原因掙扎。

“一種尺寸適合所有人”是一個(gè)謊言。 您是否可以想象編寫一款可以完成您職業(yè)生涯中所有工作的軟件？這是Web開發(fā)框架的主要問題之一。您的項(xiàng)目有非常具體的需求，我們傾向于通過添加庫，插件或附加組件來擴(kuò)展框架范圍來解決。沒有框架可以100％提供您所需要的東西，也沒有框架100％由您會(huì)發(fā)現(xiàn)有用的東西組成。

過多的代碼不使用會(huì)導(dǎo)致網(wǎng)站的加載時(shí)間滯后，這對于每個(gè)其他用戶而言都變得越來越重要。另一個(gè)問題是“一刀切”的思維定式導(dǎo)致代碼效率低下。以為例， $(‘sku-product').html('SKU 909090');這是jQuery代碼，最后，我們都知道它將被翻譯成 document.getElementById('sku-product')[removed] = 'SKU 909090';。

在單行上的這種區(qū)別似乎并不重要，但是更改頁面特定元素的內(nèi)容正是React的優(yōu)點(diǎn)?，F(xiàn)在，React經(jīng)歷了創(chuàng)建DOM表示的過程，并分析了您嘗試呈現(xiàn)的內(nèi)容之間的差異。僅從一開始就定位要更改的內(nèi)容會(huì)更容易嗎？

您所走過的那雜草叢生的荊棘正在蔓延。 您是否曾經(jīng)遇到過使用框架并嘗試向其中添加庫的情況，只是為了意識到所需的庫版本與所使用的框架版本無法很好地兼容？有時(shí)，使兩段代碼協(xié)同工作要比自己編寫代碼花費(fèi)更多的精力。而且由于您使用的框架和庫通常是基于其他 框架和庫構(gòu)建的， 這些框架和庫可能具有您甚至無法預(yù)料到的隱藏不兼容性，因此問題可能會(huì)成倍增長，甚至達(dá)到無法管理的程度。希望該項(xiàng)目保持增長。

跟上瓊斯的步伐是一件事情。 是否曾經(jīng)在AngularJS中從事過一個(gè)項(xiàng)目，只是發(fā)現(xiàn)您需要在Angular 4發(fā)布之前才出現(xiàn)的東西？您甚至不知道Angular 5已發(fā)布嗎？這是另一個(gè)巨大的問題。即使您只使用一個(gè)前端框架，當(dāng)發(fā)生新的主要版本時(shí)，事情也可能發(fā)生很大變化，以至于您努力編寫的代碼甚至都無法在新版本上運(yùn)行。從煩人的許多文件更改需要完全重寫代碼，這可能會(huì)導(dǎo)致任何事情。

緊跟框架的最新版本是具有挑戰(zhàn)性的，但是要注意的是，當(dāng)更新完全停止并且其他技術(shù)無法跟上其他框架時(shí)，其他框架也會(huì)受到影響。2010年，AngularJS和Backbone首次發(fā)布。今天，Angular已經(jīng)是其第五個(gè)主要版本，而Backbone則完全不在人們的關(guān)注范圍內(nèi)。七年似乎很長一段時(shí)間。如果您建立網(wǎng)站，它們的美觀和功能可能已完全改變。如果您正在構(gòu)建應(yīng)用程序，則押注在錯(cuò)誤的框架上可能會(huì)使公司在以后需要重寫的情況下處于艱難而昂貴的境地。

當(dāng)您只有一把錘子時(shí)，一切看起來都像釘子。 如果您經(jīng)常使用Web開發(fā)框架，那么您可能會(huì)遇到這種情況，其中單個(gè)代碼庫定義了您將來使用的代碼的形狀，即使它只是外圍相關(guān)的。假設(shè)您要建立一個(gè)類似YouTube的平臺，并且想要使用FrameworkX。即使在當(dāng)今這個(gè)時(shí)代聽起來有些荒唐，您還是可能會(huì)決定使用Flash錄制視頻，因?yàn)檫@就是內(nèi)置在框架中。

框架有意見，而且意見有力；例如，React會(huì)強(qiáng)制您以特定方式使用JSX。您可以在各處看到以這種方式使用的代碼。還有其他選擇嗎？是。但是誰使用它？這并不總是一件壞事，但是如果您需要執(zhí)行復(fù)雜的動(dòng)畫，則可能只需要一個(gè)動(dòng)畫框架而不是整個(gè)React。我見過人們在做瘋狂的事情，例如在頁面上添加jQuery只是為了將節(jié)點(diǎn)添加到元素上，而在香草JS中使用可以實(shí)現(xiàn)這一點(diǎn) document.getElementById('id_of_node').appendChild(node);。