从jQuery转向Vue

傷城~ 2021-06-26 16:06 717阅读 0赞

作为一个使用了`jQuery`很多年 的人，最近，我成为了一个`Vue`的皈依者，我认为从一个框架到另一个框架的迁移过程将是一个值得讨论的有趣的话题。

在我开始之前，我想清楚地说明一点。我并没有以任何方式告诉任何人去停止使用`jQuery`。`jQuery`最近相当流行，而且见鬼，我几年前也写过类似的东西(“我如何(不)使用`jQuery`”)。如果你使用`jQuery`完成了你的项目，并且你的最终用户成功地使用了你的站点，那么你将获得更多的动力去继续使用对你有用的东西。

本指南更适合那些可能具有多年`jQuery`经验并希望了解如何使用`Vue`来完成工作的人。考虑到这一点，我将重点介绍我所认为的“核心”`jQuery`用例。我不会涵盖每一个可能的特性，而是用“我经常使用`jQuery`来完成 `[X]`”的方式来代替，这种方式可能更适合那些考虑学习`Vue`的人。(顺便提一句，请注意，我编写示例的方式只是执行一个任务的一种方式。`jQuery`和`Vue`都提供了多种方法来实现相同的目标，这是一件很棒的事情!)

记住了这一点，我们来思考一些可以使用`jQuery`完成的高级的东西:

*  在`DOM`中找到某些东西(稍后再用它做一些事情)
 *  修改`DOM`中的某些东西(例如一个段落的文本或一个按钮的类)
 *  读取和设置表单值
 *  表单验证(实际上是上面各项的一个组合)
 *  `ajax`调用和处理结果
 *  事件处理(例如点击按钮，做某些事情)
 *  测量或改变元素的样式

当然，`jQuery`还有更多的功能，但是这些用途(至少在我看来)涵盖了最常见的用例。还要注意，在上面的列表中有很多异花授粉现象。那么，我们应该从简单的一一对应的比较开始吗?不，没那么快。我们先从介绍`Vue`应用程序中的主要差异开始。

# 定义`Vue`的使用场景 #

当我们将`jQuery`加入到页面上时，我们基本上是在`JavaScript`代码中添加一把瑞士军刀来处理常见的`web`开发任务。我们可以按照我们认为合适的顺序来处理任何一个用例。例如，今天客户可能会要求表单验证，然后在一个月左右后，又要求在站点的头部添加一个基于`Ajax`的搜索表单。

`Vue`在这方面有一个显著的不同。当使用`Vue`开始一个项目时，我们首先会在`DOM`中定义一个我们希望`Vue`专用的“区域”。因此，我们来考虑一个简单的原型`web`页面:  
![001.jpg][]在一个典型的`jQuery`应用程序中，我们可以编写代码来处理头部、侧边栏和登录表单等。这很简单:  
![001.jpg][001.jpg 1]  
而在一个`Vue`应用程序中，我们首先需要指定要处理的内容。假设我们的客户首先要求我们向`loginForm`元素添加验证，那么我们的`Vue`代码就要指定这一点:  
![002.jpg][]这意味着，如果客户后来决定让我们在侧边栏中添加一些内容，那我们通常会添加第二个`Vue`应用程序:  
![001.jpg][001.jpg 2]  
这是件坏事吗?绝对不是。我们马上就会得到封装的好处。如果我们不小心使用了一个具有泛型名称的变量(我们都这样做过)，我们不必担心它与代码的其他部分发生冲突。过后，当客户端增加了另一个要求时，像这样将我们独特的、逻辑化的`Vue`代码集区分开就会确保每一个`Vue`应用程序不会相互干扰。

所以，是的，这是一件好事。但当我第一次开始使用`Vue`时，它绝对让我停了下来。现在，进入我们的用例。

# 在`DOM`中查找东西 #

你会发现另一个有趣或可怕的方面是如何“在`DOM`中查找东西”。这有点模糊，但我们来考虑一个强有力的例子。我们有一个按钮，当它被点击时，我们让一些事情发生。下面是一个简短的例子，展示了它是怎样的:  
![001.jpg][001.jpg 3]现在我们来将这个例子与用`Vue`的实现方式进行比较:  
![001.jpg][001.jpg 4]这个`Vue`应用程序有点冗长，但是请注意标记是如何在操作(“`click`”)和将要调用的函数之间建立一个直接连接的。`Vue`的代码并没有与`DOM`进行向后绑定(我们在`el`部分之外定义了它需要运行的地方)。这是`Vue`最吸引我的地方之一——它能很容易地告诉你将要发生什么。此外，我不需要过多地担心`ID`值和选择器。如果我更改了按钮的类或`ID`，我不需要返回代码中去更新选择器。

我们来考虑另一个例子:在`DOM`中查找和更改文本。想象一下那个按钮，单击它，现在会更改`DOM`的另一部分的文本。  
![001.jpg][001.jpg 5]  
我已经添加了一个新的`span`，现在，当按钮被单击时，我们使用另一个选择器来查找它，并使用一个`jQuery`工具方法来更改其中的文本。现在我们来考虑一下`Vue`版本:  
![001.jpg][001.jpg 6]  
在本例中，我们使用`Vue`的模板语言(突出显示的行)来指定我们希望在`span`中呈现的一个变量，在本例中是`resultText`。现在，当按钮被单击时，我们更改该值，`span`的内部文本将会自动更改。

> 顺便说一句，`Vue`支持`v-on`属性的简写，因此示例中的按钮可以用`@click=“ doSomething"`代替。

# 读写表单变量 #

处理表单可能是我们可以用`JavaScript`做的最常见也是最有用的事情之一。甚至在`JavaScript`之前，我早期的“web开发”大部分都是通过编写`Perl`脚本来处理表单提交。作为接受用户输入的主要方式，表单对`web`来说一直都是很重要的，而且很可能会在相当长一段时间内保持不变。我们来考虑一个简单的`jQuery`例子，它将读取几个表单字段并设置另一个:  
![001.jpg][001.jpg 7]  
这段代码演示了`jQuery`如何通过`val( )`方法读写表单。最后，我们从`DOM`中获取四个项目(所有的三个表单字段和一个按钮)，并使用简单的数学方法来生成一个结果。现在我们来考虑一下`Vue`版本:  
![001.jpg][001.jpg 8]  
这里介绍了一些有趣的`Vue`快捷方法。首先，`v-model`是`Vue`如何在`DOM`和`JavaScript`中的值之间创建双向数据绑定。`data`块变量将自动与表单字段同步。更改数据，表单就会更新。更改表单，数据就会更新。`.number`是`Vue`的一个标志，用于将表单字段的继承字符串值视为数字。如果我们不做这一步，按原样做加法，我们会看到字符串加法，而不是算术。我已经使用`JavaScript`处理了将近一个世纪了，但还是搞砸了。

另一个简单的“技巧”是`@click.prevent`。首先，`@click`为按钮定义了一个单击处理程序，然后`.prevent`部分会阻止浏览器提交表单的默认行为(相当于`event.preventDefault( )`)。

最后一个是绑定到该按钮的`doSum`方法进行的相加操作。注意，它只处理数据变量(`Vue`在`this`作用域内允许对这些变量进行操作)。

虽然这主要是我个人的感觉，但我非常喜欢在用`Vue`编写脚本时，脚本中没有查询选择器，以及`HTML`如何更清楚地显示它在做什么。

最后，我们甚至可以完全去掉按钮:  
![001.jpg][001.jpg 9]  
`Vue`的一个更酷的特性是`computed properties`（计算属性）。它们是虚拟值，可以识别其派生值何时被更新。在上面的代码中，只要两个表单字段中的任何一个发生更改，总和就会更新。这也适用于表单字段之外。我们可以这样渲染其总和:  
![001.jpg][001.jpg 10]

# 使用`Ajax` #

值得称赞的是，`jQuery`使`Ajax`的使用变得非常简单。事实上，我可以说我已经以一种“普通”的方式完成了`Ajax`，可能总共只有一次（如果你对此很好奇，你可以查看`XMLHttpRequest`规范，并且你可能会为你已经避免了它而感到高兴）。jQuery简单的`$.get(…)`方法在很多情况下都能工作，并且当它需要在更复杂的东西中使用时，`$.ajax()`也能使它变得简单。jQuery做得很好的另一件事是它处理`JSONP`请求的方式。虽然现在使用`CORS`基本上没有必要，但`JSONP`是一种处理向不同域中的`API`发出请求的方法。

那么，`Vue`如何让`Ajax`变得更简单呢?没有什么!

好吧，听起来很吓人，但其实并不可怕。有许多处理HTTP请求的选项，而Vue.js采用了一种更不可知的方式，让我们开发人员决定如何处理它。所以，是的，这确实意味着更多的工作，但我们有一些不错的选择。

首先应该考虑的是`Axios`，这是一个`Promise-based`库，在`Vue`社区中非常流行。下面是一个使用它的简单的例子(摘自它们的README文件):  
![001.jpg][001.jpg 11]  
`Axios`支持`POST`请求，当然，它也允许我们在许多其他选项中指定头文件。

虽然`Axios`在`Vue`开发人员中非常流行，但我并不是真心喜欢它。(至少现在还没有。)相反，我更喜欢`Fetch`。`Fetch`不是一个外部库，而是执行`HTTP`请求的一种`web`标准方法。`Fetch`在大约`90%`的浏览器上都有很好的支持，虽然这意味着使用它并不完全安全，但是我们总是可以使用一个我们需要的`polyfill`。

虽然这完全超出了我们在这里讨论的范围，但是`Kingsley Silas`写了一本关于在`React`中使用`Axios`和`Fetch`的优秀指南。

和`Axios`一样，`Fetch`也是`Promise-based`的，并且有一个友好的`API`:  
![001.jpg][001.jpg 12]  
`Axios`和`Fetch`都涵盖了所有类型的`HTTP`请求，所以它们都能满足任意数量的需求。让我们看一个简单的比较。下面是一个使用了星球大战`API`的简单`jQuery`演示。  
![001.jpg][001.jpg 13]  
在上面的示例中，我使用`$.get`调用该`API`并返回一个电影列表。然后我用这些数据生成一个标题列表作为 `li` 标记元素，并将其全部插入到一个`ul`块中。

现在，让我们考虑一个使用`Vue`的例子:  
![001.jpg][001.jpg 14]  
其中最好的部分可能是使用`v-for`模板。注意`Vue`是如何做到与布局无关的(至少与JavaScript无关)。数据是从该`API`中获取的。它被分配了一个变量。布局处理如何显示它。我一直讨厌在我的`JavaScript`中使用`HTML`，但是`jQuery`提供了解决方案，把它嵌入到`Vue`中看起来就很自然很合适。

# 一个完整的（在某种程度上有点琐碎）例子 #

为了更好地理解它，让我们考虑一个更真实的例子。我们的客户要求我们为一个产品`API`构建一个支持`Ajax`的前端搜索接口。功能列表包括:

*  支持按名称和产品类别进行过滤
 *  我们必须提供搜索项或类别的表单验证
 *  当`API`被点击时，向用户显示一条消息并禁用提交按钮
 *  完成后，对未显示产品进行报告或列出匹配项

我们从`jQuery`版本开始。首先, `HTML`部分如下:  
![001.jpg][001.jpg 15]  
有一个带有两个过滤器和两个`div`的表单。一个用做搜索或报告错误时的临时状态，另一个用于呈现结果。现在，检查代码。  
![001.jpg][001.jpg 16]  
![002.jpg][002.jpg 1]  
代码首先为要处理的每个`DOM`项(表单字段、按钮和`div`)创建一组变量。代码的逻辑核心在按钮的点击处理程序中。我们进行验证，如果一切正常，就对该`API`执行一个`POST`请求。当请求返回时，我们要么呈现结果，要么在没有匹配的情况下显示消息。

你可以使用下面的CodePen来运行这个演示的完整版本。  
![001.jpg][001.jpg 17]  
现在让我们考虑`Vue`版本。同样，我们先从布局开始:  
![001.jpg][001.jpg 18]  
从顶部看，其中的变化包括:

*  用一个`div`包装布局，可以让`Vue`知道在哪里运行。
 *  对表单字段使用`v-model`，以便它能轻松处理数据。
 *  使用`@click.prevent`处理执行主搜索操作。
 *  使用 `:disabled` 在这个Vue应用程序中将按钮绑定到一个值，无论按钮是否禁用 (我们稍后将看到它的实际操作)。
 *  状态值与前面的示例稍有不同。`jQuery`有一个特定的方法来设置`DOM`项中的文本和`HTML`中的文本，而Vue在将`HTML`分配给要呈现的值时需要使用`v-html`。如果我们在`HTML`中直接编写`{ {status}}`，标签将被转义。
 *  最后，使用`v-if`条件性地呈现结果列表，同时使用`v-for`来处理迭代。

现在让我们看看代码。  
![001.jpg][001.jpg 19]  
![002.jpg][002.jpg 2]  
值得调用的第一个块是`data`字段集。有些映射到表单字段，有些映射到结果、状态消息等等。`searchProducts`方法处理的内容与`jQuery`版本大致相同，但通常直接绑定到`DOM`的代码要少得多。例如，即使我们知道结果是以一个无序列表列出的，但代码本身并不关心这一点。它只是进行赋值，标记才处理呈现值。总的来说，与`jQuery`代码相比，`JavaScript`代码更关心逻辑，`jQuery`代码“感觉”是更好的分离了关注点。

和以前一样，这里有一个CodePen可以让你自己试试:  
![001.jpg][001.jpg 20]

# `jQuery`将死! `Vue`万岁! #

好吧，这有点过分了。正如我在开始时所说的，如果你喜欢使用`jQuery`并且它对你有用的话，那我觉得你完全没必要更改任何东西。  
不过，我想说的是，对于习惯使用`jQuery`的人来说，`Vue`似乎是一个很好的“下一步”。`Vue`支持复杂的应用程序，并为搭建和构建项目提供了一个非常棒的命令行工具。但是对于更简单的任务来说，Vue是一个很棒的“现代`jQuery`”的替代品，它已经成为我开发的可选工具!  
有关使用Vue替代jQuery的另一个观点，请查看Sarah Drasner的“`使用Vue.js替换jQuery:无需构建步骤`”，因为它包含了其他一些超级有用的例子。

[001.jpg]: /images/20210626/332a1be6195349c28bc8327acd235cf0.png
[001.jpg 1]: /images/20210626/2eee319621034a3fbbdbc2fe8a709d7e.png
[002.jpg]: /images/20210626/b3fee71a2e5c4d39a28e6e0b6d66eb5d.png
[001.jpg 2]: /images/20210626/1527c5f70fce4732a09e1675b6cd7ff6.png
[001.jpg 3]: /images/20210626/d38090042f3346e69570b8870070dbaa.png
[001.jpg 4]: /images/20210626/9fd80b668147467aa242ab0e36f5e563.png
[001.jpg 5]: /images/20210626/0efec91be8de41e8bc951f9259858a4d.png
[001.jpg 6]: /images/20210626/cbdcbd0c55474c6586498d90b2ed17e2.png
[001.jpg 7]: /images/20210626/6c98f74e930c4262b32b4a2cd541f69c.png
[001.jpg 8]: /images/20210626/4da1708d85d3472fb6bd6ce49db9ca9c.png
[001.jpg 9]: /images/20210626/ec10e102316d4a36aed9698a73a7cd90.png
[001.jpg 10]: /images/20210626/998253f349c6457f8b01a30264dce41b.png
[001.jpg 11]: /images/20210626/a73bf671dca84ecd806e337786be9e44.png
[001.jpg 12]: /images/20210626/2e2af8e3555448918b55a8f34e3e3a7c.png
[001.jpg 13]: /images/20210626/41cd47e177864e45949e87949994559b.png
[001.jpg 14]: /images/20210626/2e76ae5056664b93a03578f1d1e5fec7.png
[001.jpg 15]: /images/20210626/2373e2dca96245ad89e0889c6ef10032.png
[001.jpg 16]: /images/20210626/792f9d224020412bac0e95aca669af84.png
[002.jpg 1]: /images/20210626/573dbb7424a34c33ba79f1eab536839c.png
[001.jpg 17]: /images/20210626/cfaf6f86b35a468f8681588c787407af.png
[001.jpg 18]: /images/20210626/100f0306eb63422082e5b770d8c725ba.png
[001.jpg 19]: /images/20210626/cda7b697f45149b1b0c5f1bea88f6f53.png
[002.jpg 2]: /images/20210626/30fea7eba9b24784ab63d32d757b5e7b.png
[001.jpg 20]: /images/20210626/5e392a472c904bdd9a8b180b8d997c24.png