每日分享最新，最流行的軟件開(kāi)發(fā)知識(shí)與最新行業(yè)趨勢(shì)，希望大家能夠一鍵三連，多多支持，跪求關(guān)注，點(diǎn)贊，留言。

解釋用于 Web 開(kāi)發(fā)的十大前端技術(shù)的優(yōu)缺點(diǎn)，這些技術(shù)對(duì)開(kāi)發(fā)軟件應(yīng)用程序很有幫助。

在這個(gè)新冠病毒肆虐的時(shí)代，數(shù)字化變得比以往任何時(shí)候都更加重要。 前端技術(shù)（例如前端框架） 在開(kāi)發(fā)所有軟件應(yīng)用程序中發(fā)揮了重要作用。

盡管后端很重要，但它并不是用戶遇到的第一件事。

前端框架

框架是有助于開(kāi)發(fā)和維護(hù)大型項(xiàng)目的小軟件。 這些模塊包括準(zhǔn)備好的代碼和基本的軟件模塊，程序員可以使用它們來(lái)解決一般的編程任務(wù)，例如處理 AJAX 請(qǐng)求或定義文件結(jié)構(gòu)。

這些框架定義了構(gòu)建應(yīng)用架構(gòu)的規(guī)則。 框架包括代碼庫(kù)、實(shí)用程序和腳本語(yǔ)言。該軟件用于促進(jìn)大型軟件產(chǎn)品的開(kāi)發(fā)和實(shí)施。

當(dāng)有框架時(shí)，開(kāi)發(fā)人員不需要啟動(dòng)新項(xiàng)目。相反，他們可以使用該基礎(chǔ)來(lái)實(shí)現(xiàn)特定于其項(xiàng)目的其他功能。

在 Web 開(kāi)發(fā)中，前端是顯示網(wǎng)站或應(yīng)用程序的圖形用戶界面的用戶界面。 您可能會(huì)說(shuō)它是用戶在網(wǎng)站或應(yīng)用程序上與之交互和查看的界面。 因此，該部分必須以用戶友好的方式設(shè)計(jì)，以便有效地傳授來(lái)自服務(wù)器端的知識(shí)。

1. React

React 也稱為 React JS。它是一個(gè)著名的前端 JavaScript 庫(kù)，允許開(kāi)發(fā)和維護(hù)用戶界面。 這使用 MVC 架構(gòu)，但使用不同的表來(lái)表示和數(shù)據(jù)可用性。 它的顯著特征之一是虛擬 DOM，它處理文檔訪問(wèn)和操作。 DOM 允許它們的行為類似于樹(shù)結(jié)構(gòu)，并且每個(gè) HTML 元素的功能類似于一個(gè)對(duì)象。它還可以與 XML 文檔和 HTML 文件很好地交互。

它由 Facebook 提供支持，被廣泛認(rèn)為是前端工具包中的優(yōu)秀庫(kù)。 這種編碼風(fēng)格使用 JSX，其中包括 HTML 引號(hào)和標(biāo)簽語(yǔ)法的混合來(lái)創(chuàng)建組件。 大型組件被分解成更小的部分，可以單獨(dú)和單獨(dú)管理。 此功能將提高開(kāi)發(fā)人員的工作效率。

優(yōu)點(diǎn)

• 組件可重用性促進(jìn)了應(yīng)用程序其他領(lǐng)域的協(xié)作和重用
• 虛擬 DOM 可用于實(shí)現(xiàn)一致和無(wú)縫的性能
• 它允許你創(chuàng)建沒(méi)有類的組件，并且更容易學(xué)習(xí) React

缺點(diǎn)

• 這些工具非常有用和先進(jìn)
• 由于框架的多次和不斷更新，很難創(chuàng)建適當(dāng)?shù)奈臋n，這會(huì)影響初學(xué)者的學(xué)習(xí)曲線
• 開(kāi)發(fā)人員從框架開(kāi)始時(shí)很難理解 JSX 的復(fù)雜性

用戶： Groupon、Microsoft、Walmart、Netflix、PayPal、Google、Uber、Facebook、eBay、LinkedIn 等。

2. Angular

Angular 是目前市場(chǎng)上最好的前端框架，也是占主導(dǎo)地位的 Web 前端平臺(tái)。 該框架將允許您創(chuàng)建高效且先進(jìn)的單頁(yè)應(yīng)用程序。 它是一個(gè)基于 Typescript 的開(kāi)發(fā)平臺(tái)，由 Google 開(kāi)發(fā)。 Angular 是一個(gè)基于組件的框架，用于開(kāi)發(fā)可擴(kuò)展的 Web 應(yīng)用程序。它還提供了一系列工具，開(kāi)發(fā)人員可以使用這些工具來(lái)創(chuàng)建、測(cè)試和修改代碼以及一系列集成良好的庫(kù)。

Angular 可以從單頁(yè)應(yīng)用程序擴(kuò)展到企業(yè)級(jí)應(yīng)用程序，具體取決于您的要求。 它提供了許多功能。

優(yōu)點(diǎn)

• 您可以將模型中所做的修改升級(jí)為查看，反之亦然
• 減少了代碼大小，因?yàn)槟J(rèn)情況下可以使用最重要的功能，例如雙向數(shù)據(jù)綁定
• 通過(guò)將組件定義為外部元素，它們可以相互解耦
• 依賴注入組件可復(fù)用且易于管理
• 龐大的支持和學(xué)習(xí)社區(qū)

缺點(diǎn)

• 有很多方法可以完成這項(xiàng)工作，因?yàn)?Angular 是一個(gè)完整的動(dòng)態(tài)解決方案，因此學(xué)習(xí)曲線更陡峭
• 動(dòng)態(tài)應(yīng)用程序有時(shí)會(huì)由于其龐大的結(jié)構(gòu)和復(fù)雜性而無(wú)法執(zhí)行

使用對(duì)象： Gmail、Upwork、PayPal、福布斯、Xbox、德意志銀行、桑坦德銀行、Blender、Microsoft Office 等。

3.Vue.js

Vue.js 是一個(gè)現(xiàn)代的、漸進(jìn)式的 MVVM 框架，它盡可能地利用增量采用。 Vue.js 是一個(gè) JavaScript 庫(kù)，它創(chuàng)建了輕量級(jí)且易于使用的交互式 UI 元素。 它通過(guò)簡(jiǎn)單靈活的 API 提供數(shù)據(jù)反應(yīng)元素。 完成較小的項(xiàng)目然后轉(zhuǎn)移到較大的項(xiàng)目是很容易的。

優(yōu)點(diǎn)

• 小而快
• 適合初學(xué)者
• 簡(jiǎn)單的語(yǔ)法
• 詳細(xì)文檔
• 積極的 SEO 影響
• 雙向數(shù)據(jù)綁定

缺點(diǎn)

• 沒(méi)有可用的插件
• 語(yǔ)言障礙
• 由私人創(chuàng)建
• 開(kāi)發(fā)者社區(qū)很小
• 不適用于大型項(xiàng)目
• 背后沒(méi)有強(qiáng)大的業(yè)務(wù)

用戶： Grammarly、小米、Adobe、阿里巴巴、Trivago、GitLab、Netflix、Facebook、路透社、任天堂等。

4. Svelte

Svelte 是一個(gè) JavaScript 編譯器，可以生成高性能的用戶界面。 Rich Harris 于 2017 年創(chuàng)建了它，但仍處于早期階段。

它使用 JavaScript 虛擬機(jī)而不是虛擬 DOM。本機(jī)專為創(chuàng)建用戶界面而設(shè)計(jì)。 通過(guò)這一點(diǎn)，Svelte 的速度比其他平臺(tái)（如 React 和 Angular 框架）快十倍。

優(yōu)點(diǎn)

• 更好的反應(yīng)性
• 比 Angular 或 React Scalable 框架更快
• 簡(jiǎn)單、輕量級(jí)，并使用現(xiàn)有的 JavaScript 庫(kù)

缺點(diǎn)

• 缺乏支持
• 小社區(qū)
• 缺乏工具
• 還不是很流行

使用者： Chess、Godaddy、HealthTree、飛利浦、 BlueHive、Cashfree、Rakuten、Razorpay。

5. jQuery

jQuery 是最知名和最古老的可用框架之一。 John Resig 創(chuàng)建了它。 它體積小、速度快、功能多，是最流行的前端 JavaScript 框架庫(kù)之一。 它是一個(gè)跨平臺(tái)庫(kù)，使客戶端 HTML 腳本編寫(xiě)更加容易。

jQuery 使執(zhí)行文檔遍歷、事件處理和動(dòng)畫(huà)等任務(wù)變得容易。它還支持各種網(wǎng)絡(luò)瀏覽器。 憑借其可擴(kuò)展性、多功能性和靈活性，jQuery 改變了 JavaScript 設(shè)計(jì)人員編寫(xiě) JavaScript 的方式。

優(yōu)點(diǎn)

• 在添加和刪除元素方面的適應(yīng)性
• 簡(jiǎn)化發(fā)送 HTTP 請(qǐng)求的過(guò)程
• 允許動(dòng)態(tài)內(nèi)容

缺點(diǎn)

• 工作速度慢
• 許多先進(jìn)的替代品可用

用戶： 美國(guó)銀行、優(yōu)步、Udemy、Twitter、Twitter 和摩根大通美國(guó)銀行。

6.Backbone.js

Backbone.js 是一個(gè) JavaScript 庫(kù)，可為 Web 應(yīng)用程序提供適當(dāng)?shù)慕Y(jié)構(gòu)。它通過(guò)為模型提供自定義事件和主要鍵值綁定來(lái)實(shí)現(xiàn)這一點(diǎn)。 您會(huì)發(fā)現(xiàn)具有豐富 API 的庫(kù)，包括視圖、聲明性事件處理和函數(shù)。 它通過(guò) RESTful JSON 用戶界面與當(dāng)前 API 進(jìn)行通信。 它是輕量級(jí)的，因?yàn)樗皇褂昧藘蓚€(gè) JS 庫(kù)。

優(yōu)點(diǎn)

• 您可以找到 100 多個(gè)可用的擴(kuò)展
• 適合初學(xué)者
• 更少的 HTTP 請(qǐng)求
• 它很小
• 深入的教程
• 它不是將數(shù)據(jù)存儲(chǔ)在 DOM 中，而是將其存儲(chǔ)在模型中

缺點(diǎn)

• 不支持雙向數(shù)據(jù)綁定
• 復(fù)雜的架構(gòu)
• 需要編寫(xiě)更多代碼
• 它被許多開(kāi)發(fā)人員認(rèn)為已經(jīng)過(guò)時(shí)了

用戶： Pinterest、優(yōu)步、Coursera、萬(wàn)事達(dá)卡、沃爾瑪、Reddit、LinkedIn、Roblox 等。

7. Ember.js

這個(gè)開(kāi)源框架值得關(guān)注。 該框架可用于創(chuàng)建現(xiàn)代用戶界面、互聯(lián)網(wǎng)解決方案、移動(dòng)應(yīng)用程序和其他跨平臺(tái)應(yīng)用程序。

遵循 MVVM 模式很重要。 Ember 會(huì)自動(dòng)為每個(gè)新實(shí)體生成一個(gè)測(cè)試程序。這是一個(gè)非常有用的功能。

優(yōu)點(diǎn)

• 一致的文檔
• 服務(wù)器端渲染
• 基于小部件的組件方法
• 本機(jī)測(cè)試和調(diào)試
• 數(shù)據(jù)綁定是雙向的
• 以 URL 為中心的方法
• 組織良好的社區(qū)
• 支持 TypeScript 和 JavaScript

缺點(diǎn)

• 初學(xué)者粗糙
• 不太適合小項(xiàng)目
• 重量級(jí)
• 缺少組件復(fù)用能力
• 很少或沒(méi)有定制

用戶： Chipotle、Blue Apron、Nordstrom、Tinder、Netflix、PlayStation Now、Apple Music、Yahoo! 和 LinkedIn。

8. Semantic-UI

SemanticUI 是前端框架市場(chǎng)的另一個(gè)新人。 Semantic-UI 由 Jack Lukicthis（全棧開(kāi)發(fā)人員）創(chuàng)建。它是一個(gè)基于有機(jī)語(yǔ)法的 CSS 框架。 它使用 LESS 和 jQuery。 它在 2015 年迅速上升到 GitHub 上的 JavaScript 項(xiàng)目列表的頂部。

優(yōu)點(diǎn)

• 有機(jī)代碼本質(zhì)上是不言自明的
• 響應(yīng)式和豐富的 UI 組件與 Ember React 和 Meteor 的集成是可能的
• 精選主題

缺點(diǎn)

• 相對(duì)較小的社區(qū)
• 不適合知識(shí)很少的初學(xué)者
• 最近的更新很少
• 要開(kāi)發(fā)自定義配置，需要一些熟練度

用戶： Kmong、數(shù)字服務(wù)、Snapchat、埃森哲。

9. Foundation

Zurb 的 Foundation 是另一個(gè)強(qiáng)大的前端框架。它的創(chuàng)建是為了幫助開(kāi)發(fā)人員快速制作原型和構(gòu)建網(wǎng)站。 它包括 HTML 和 CSS 組件，以及 JavaScript 插件和 Sass 變量。該框架還包含開(kāi)發(fā)現(xiàn)代 Web 應(yīng)用程序所需的所有功能。

與其他框架不同，F(xiàn)oundation 更多地關(guān)注原型而不是生產(chǎn)代碼。 團(tuán)隊(duì)無(wú)需編寫(xiě)代碼即可快速?gòu)脑O(shè)計(jì)轉(zhuǎn)向功能原型。

優(yōu)點(diǎn)

• 靈活的網(wǎng)格
• 您可以創(chuàng)建精美的網(wǎng)站
• HTML5 表單驗(yàn)證庫(kù)
• 您可以獲得針對(duì)不同設(shè)備和媒體的定制用戶體驗(yàn)

缺點(diǎn)

• 初學(xué)者很難
• 更少的支持論壇和社區(qū)論壇。
• 有一些競(jìng)爭(zhēng)對(duì)手比Foundation更受歡迎

使用者： Firefox 和 eBay。

10. Get in the Act

React 是前端開(kāi)發(fā)中使用最廣泛的前端框架，但它確實(shí)存在一些缺陷。 這個(gè)想法啟發(fā)了創(chuàng)建一個(gè)較小的框架，該框架提供與 React 類似的功能。 因此，Preact 是 React 的微型版本。

兩者都有相同的 API 并使用相同的應(yīng)用程序開(kāi)發(fā)方法。 然而，Preact 更小，并且使用最快的虛擬 DOM。

此模板非常適合不需要很多集成的小型應(yīng)用程序。

優(yōu)點(diǎn)

• 可以使用 React 樣式的元素，但它是使用 Backbone 和 JQuery 構(gòu)建的
• 應(yīng)用程序開(kāi)發(fā)可以提高性能
• 所有這些特征都體現(xiàn)在 React 社區(qū)中

缺點(diǎn)

• 與 React 原型不兼容
• 不支持 React 的合成事件使用
• 沒(méi)有上下文支持