言

大家好，我是蝸牛，在上一篇中，我們介紹了不同版本的HTTP區別和發展背景，這篇文章我們來聊聊HTTP的缺點，HTTP缺點大致總結有以下三點：

? 通信使用明文（不加密），內容可能會被竊聽。

? 不驗證通信方的身份，因此有可能遭遇偽裝（客戶端和服務端都有可能）

? 無法證明報文的完整性，有可能會被篡改。

其實以上問題不止HTTP有，其他未加密的協議也有此類問題，下面就以上三點詳細介紹

通信使用明文（不加密），內容可能會被竊聽

因為HTTP不具備加密的功能，所以無法對通信報文進行加密，所以是使用明文進行發送，那么就有可能被竊聽。

可以看到竊聽無處不在

竊聽的方式有多種，比較常見有抓包工具（Wireshark）或者嗅探器（Sniffer）等工具，進行竊聽。

下面圖片是使用Wireshark抓取的數據：

如何防止

? 通信的層加密通過HTTP與SSL/TLS的組合使用（SSL/TSS后續章節介紹），可以加密http通信內容。

? 通信報文內容加密

雙方約定好密鑰，在傳輸前對原報文進行一個加密，傳輸至服務端或客戶端再進行解密，因為此類方式不同于https方式，所以還是有以下風險

? 密鑰不是一次一密，而且是內嵌在代碼中，都有可能被獲取。

? 如果是基于瀏覽器的工程，那么這個密鑰是內嵌在js中的，而js是可以訪問的，那么就有可能被獲取。

? 如果是app工程中，也有可能被反編譯獲取。

不驗證通信方的身份，因此有可能遭遇偽裝

HTTP協議的請求與響應不會對通信方進行身份的確認，因此這種無法確認通信方，總結有以下幾類問題：

? 無法確定請求目標的Web服務器是否，真正要訪問的服務器。

? 無法確定客戶端是否是真實要響應的客戶端。

? 無法確定正在通信的雙方是否具備訪問權限，比如：提供的WEB服務只想開發給指定的客戶端訪問。

? 無法判定請求來自何方，出自誰手。

? 即使是無意義的請求，也會照單全收。如海量的Dos攻擊。

如何防止

使用SSL才可以防止此類問題，SSL不僅提供加密功能，還提供證書，通過證書可以確定通信的方是意料之中的，這里肯定有人會問那證書如何保證可信呢？

證書是有公認值得信賴的CA機構頒發的，其他機構是沒有頒發證書權限的。CA機構是可信賴的，那么頒發的證書也是可信賴的。

客戶端驗證服務端是否是可信的服務端，即單向認證。

客戶端與服務端相互認證，即雙向認證。

無法證明報文的完整性，有可能會被篡改

所謂完整性是指信息的準確度，無法證明完整性，那么也就無法判定信息是否準確。

由于HTTP協議無法證明通信的完整性，那么請求或者響應過程中報文就有可能被篡改，而服務端或者客戶端是無法感知的。

比如從網上下載的內容，是無法確認下載后的內容是否跟服務器上的內容一致。

像這樣在請求/響應途中，遭攻擊者攔截并篡改內容攻擊，稱為中間人攻擊。

如何防止

? 使用md5/sha1/pgp來確定報文完整性的方法

點擊下載后，可以查看對應文件簽名或者散列值，當我點擊MD5后，如下圖：

通過對下載后文件在通過MD5生成散列碼，與官網上的散列碼進行比較，來確定文件是否被篡改。

但是從其他方式證明此種方式也不是絕對安全的，具體可以參見：http://bobao.360.cn/news/detail/768.html大概意思就是構造”前綴碰撞法“，來制造MD5值一樣，文件內容不一樣的文件。

總結

HTTP雖然使用極為廣泛, 但是卻存在不小的安全缺陷, 主要是其數據的明文傳送和消息完整性檢測的缺乏, 而這兩點恰好是網絡支付, 網絡交易等新興應用中安全方面最需要關注的

因此為了解決以上問題需要和SSL/TLS相關協議組合，這就是HTTPS，下篇我們介紹HTTPS

載說明：原創不易，未經授權，謝絕任何形式的轉載

當今互聯網時代，前端開發框架的重要性越來越受到關注。隨著JavaScript的不斷發展，前端框架也不斷涌現。但是，在這么多的框架中，該如何選擇適合自己項目的框架呢？本文將會介紹主流的JavaScript前端框架：Vue.js、React、Angular等，并對它們的優劣勢進行評估，幫助您做出最佳的選擇。

1、React

React是一個用于構建用戶界面的JavaScript庫。它由Facebook和一群個人開發者以及公司共同維護。React可用作單頁或移動應用程序開發的基礎。然而，React僅關注將數據呈現到DOM中，因此創建React應用程序通常需要使用附加庫來進行狀態管理、路由和與API的交互。React還用于構建可重用的UI組件。在這方面，它的工作方式類似于Angular或Vue等JavaScript框架。然而，React組件通常采用聲明式語法而不是使用命令式代碼編寫，使其更易于閱讀和調試。因此，許多開發人員即使不將其作為整個前端框架使用，也更喜歡使用React構建UI組件。

優點： React使用虛擬DOM而不是操作真實DOM，因此速度快且高效。 React采用聲明式語法和清晰的文檔，易于學習。 React組件可重用，使代碼維護更容易。

缺點： React是一個復雜的JavaScript庫，具有較大的學習曲線。 React并非完整的框架，因此需要使用附加庫來完成許多任務。

2、Next.js

Next.js是一個JavaScript庫，它使React應用程序實現了服務器端渲染。這意味著Next.js可以在將React應用程序發送到客戶端之前，在服務器上呈現它們。這有幾個好處。首先，它允許您預渲染組件，以便在用戶請求它們時它們已經在客戶端上可用。其次，它可以通過使爬蟲更容易地索引您的內容，提高React應用程序的SEO效果。最后，它可以通過減少客戶端呈現頁面所需的工作量來提高性能。

以下是開發人員喜歡Next.js的原因：

1. Next.js使得在不進行任何配置的情況下很容易開始使用服務器端渲染。
2. Next.js自動對應用程序進行代碼拆分，因此每個頁面僅在請求時加載，這可以提高性能。

缺點：

如果不小心處理，Next.js可能會使您的應用程序代碼庫變得更加復雜，難以維護。 一些開發人員認為Next.js的內置功能很武斷，缺乏靈活性。

3、Vue.js

Vue.js是一個用于構建用戶界面和單頁應用程序的開源JavaScript框架。與React和Angular等其他框架不同，Vue.js的設計目的是輕量級和易于使用。Vue.js庫可以與其他庫和框架一起使用，也可以作為一個獨立的工具用于創建前端Web應用程序。Vue.js的一個關鍵特性是其雙向數據綁定，當模型改變時，視圖會自動更新，反之亦然。這使它成為構建動態用戶界面的理想選擇。此外，Vue.js還帶有一些內置功能，如模板系統、反應性系統和事件總線。這些功能使得可以創建復雜的應用程序，而無需依賴第三方庫。因此，Vue.js近年來已成為最受歡迎的JavaScript框架之一。

優點：

Vue.js由于其小巧的體積和清晰的文檔而易于學習。 Vue.js組件是可重用的，這使得代碼維護更容易。 Vue.js應用程序由于虛擬DOM和異步組件加載而非?？焖?。

缺點：

雖然Vue.js易于學習，但如果要掌握其所有功能，則具有較大的學習曲線。 Vue.js沒有像其他一些框架那樣提供許多庫和工具。

4、Angular

Angular是一個用于構建JavaScript、HTML和TypeScript的Web應用程序和應用的JavaScript框架，由Google創建和維護。Angular提供雙向數據綁定，使得對模型的更改自動傳播到視圖。它還提供了聲明性語法，使得構建動態UI變得容易。最后，Angular提供了許多有用的內置服務，例如HTTP請求處理，支持路由和模板等。

優點：

Angular有一個龐大的社區和許多可用的庫和工具。 由于其良好組織的文檔和清晰的語法，Angular易于學習。

缺點：

雖然Angular易于學習，但如果要掌握其所有功能，則需要較長的學習曲線。 與其他一些框架相比，Angular并不是很輕量級。

5、Svelte

簡而言之，Svelte 是類似于 React、Vue 或 Angular 的 JavaScript 框架。然而，那些框架使用虛擬 DOM （文檔對象模型）差異計算來確定視圖中的更改，而 Svelte 使用一種稱為 DOM 差異計算的技術。這意味著它只更新已更改的 DOM 部分，從而實現更高效的渲染過程。此外，Svelte 還包含了其他框架不具備的一些內置優化，如自動批處理 DOM 更新和代碼拆分。這些功能使得 Svelte 成為高性能應用程序的不錯選擇。

Svelte的主要賣點是編譯器，它將您的應用程序代碼轉換為高度優化的原生JavaScript。這種方法消除了虛擬DOM的需求，從而導致更快速和更高效的渲染性能。Svelte還支持響應式編程，這意味著應用程序狀態的更改會實時觸發UI的更新。

延伸閱讀：什么是DOM 差異計算技術

DOM 差異計算技術則是一種直接在實際 DOM 樹上進行比較和操作的技術，它的思想是盡量避免不必要的 DOM 操作。這種技術需要進行大量的計算，因為它需要遍歷整個 DOM 樹來查找更改的元素。與虛擬 DOM 不同，它沒有中間層，因此它的執行速度更快，但開發人員需要手動編寫實際 DOM 操作的代碼。

優點：

Svelte 具有其他框架不具備的內置優化，如代碼拆分。 Svelte 由于其清晰的語法和組織良好的文檔而易于學習。

缺點：

盡管 Svelte 易于學習，但要掌握其所有功能需要很大的學習曲線。 Svelte 沒有像其他框架那樣多的庫和工具可用。

6、Gatsby

Gatsby是一個基于React的免費、開源框架，可幫助開發人員構建快速的網站和應用程序。它使用尖端技術使構建網站和應用程序的過程更加高效。其關鍵功能之一是能夠預取資源，以便在需要時立即可用。這使得Gatsby網站非常快速和響應。使用Gatsby的另一個好處是，它允許開發人員使用GraphQL從任何來源查詢數據，使構建復雜的數據驅動型應用程序變得容易。此外，Gatsby附帶了許多插件，包括用于SEO、分析和圖像優化的插件，使其更易于使用。所有這些因素使得Gatsby成為構建現代網站和應用程序的極受歡迎的選擇。

優點：

由于使用了預取功能，Gatsby網站非常快速和響應。 由于支持GraphQL，Gatsby使構建復雜的數據驅動型應用程序變得容易。 Gatsby附帶了許多插件，使其更易于使用。

缺點：

雖然Gatsby易于使用，但如果您想掌握其所有功能，需要較長的學習曲線。 Gatsby的庫和工具可用性不如其他一些框架。

7、Nuxt.js

Nuxt.js是一個用于構建JavaScript應用程序的漸進式框架。它基于Vue.js，并帶有一組工具和庫，使得創建可在服務器端和客戶端上呈現的通用應用程序變得容易。Nuxt.js還提供了處理異步數據和路由的方式，這使得它非常適合構建高度交互式的應用程序。此外，Nuxt.js帶有一個CLI工具，使得輕松搭建新項目并進行構建、運行和測試變得容易。使用Nuxt.js，你可以創建快速、可靠且可擴展的JavaScript應用程序。

優點：

Nuxt.js易于使用和擴展。 由于服務器端渲染，Nuxt.js應用程序快速且響應迅速。

缺點：

盡管Nuxt.js易于使用，但如果要掌握其所有功能，則需要較長的學習曲線。 Nuxt.js的可用庫和工具沒有其他框架那么豐富。

8、Ember.js

Ember.js以約定優于配置的方法而聞名，這使得開發人員更容易開始使用該框架。它還提供了內置庫，用于常見任務，如數據持久性和路由，這使得開發速度更快。雖然Ember.js有一個陡峭的學習曲線，但它為開發人員提供了很多靈活性和強大的功能，可以創建豐富的Web應用程序。如果您正在尋找用于構建單頁應用程序（SPAs）的前端JavaScript框架，則Ember.js絕對值得考慮。

優點：

Ember.js使用約定優于配置，這使得更容易開始使用該框架。 Ember.js具有內置庫，可用于常見任務，如數據持久性和路由。 Ember.js為開發人員提供了很多靈活性和強大的功能，可以創建豐富的Web應用程序。

缺點：

Ember.js具有陡峭的學習曲線。 Ember.js可用的庫和工具不如其他一些框架多。

9、Backbone.js

Backbone.js是一個輕量級的JavaScript庫，可以讓開發人員創建單頁應用程序。它基于Model-View-Controller（MVC）架構，這意味著它將數據和邏輯與用戶界面分離。這使得代碼更易于維護和擴展，同時也更容易創建復雜的應用程序。Backbone.js還包括一些功能，使其成為開發移動應用程序的理想選擇，例如其將數據綁定到HTML元素的能力以及對觸摸事件的支持。因此，Backbone.js是開發人員想要創建快速響應的應用程序的流行選擇。

優點：

Backbone.js是輕量級的庫，而非完整的框架。 Backbone.js易于學習和使用。 Backbone.js非常可擴展，有許多第三方庫可用。

缺點：

Backbone.js的內置功能不如其他一些框架多。 Backbone.js的社區比其他一些框架小。

結束

在選擇JavaScript框架時，沒有一個完美的答案。每個框架都有其優點和缺點，取決于你的具體項目需求和團隊技能。通過對每個框架的了解和比較，你可以更好地理解它們的差異，以便更好地選擇適合你的項目的框架。在使用框架的過程中，不斷學習和掌握新的技術和工具是非常重要的。希望本文能夠幫助你在選擇JavaScript框架時做出更明智的決策，以便開發出更好的Web應用程序。

今天的分享就到這里，感謝你的閱讀，希望能夠幫助到你，文章創作不易，如果你喜歡我的分享，別忘了點贊轉發，讓更多有需要的人看到，最后別忘記關注「前端達人」，你的支持將是我分享最大的動力，后續我會持續輸出更多內容，敬請期待。

原文：https://blog.risingstack.com/best-javascript-frameworks/

作者：RisingStack Engineering

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正

年前，我讀過一本關于講解JavaScript精髓的書，其中內容就涉及到一些關于JavaScript眾多缺陷，放到現在，它依然是我們應該去避免的雷，所以，我給大家總結了一下，總共下面5點，希望對前端開發的你有益。

01. 避免大量使用全局變量

將全局變量散布在各地，隨著代碼的增長，這些變量將有可能開始沖突，導致意外的錯誤和難以發現的詭異問題。

像這樣：

我們應該將其封裝在一個函數中以避免污染全局范圍。

好的寫法是這樣的：

02. 避免產生回調地獄

回調地獄現象不用多說，代碼的相互嵌套。讓我們很難受。好在我們后面實際上有好的處理方式。

像這樣：

我們可以使用async/await或Promise來處理這種情況。

好的寫法是這樣的：

03. 忽視了錯誤處理

大家都非常清楚，如果沒有處理好程序中的錯誤，你開發的應用有可能在運行的過程中就崩潰了，也就是說用不了，這種情況一旦帶到線上去，就比較嚴重了。

舉個例子，下面這個函數

如果分母是0，那程序就執行不下去了，我們的應用不能因為這個錯誤而訪問不了。

所以我們的代碼應該這樣寫：

04. 別依靠eval()

eval函數強大，但同時使用的時候也不安全。

如果你還在這樣子使用eval函數：

那你可以改一種寫法，像下面這樣子：

05. 不使用嚴格模式

下面函數里定義x變量時，并沒有使用var/let/const，非嚴格模式下是能通過的。

總結

避免重復造輪子