言

大家好，我是蜗牛，在上一篇中，我们介绍了不同版本的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，非严格模式下是能通过的。

总结

避免重复造轮子