我怎么样（不）使用jQuery

Posted 2021-04-08 JavaScript无所不能

这不是另一个关于你如何不需要jQuery的文章。如果你没有注意到，那已经被覆盖了。大约800万次：

我不希望任何人停止使用jQuery。用它就爱它。很高兴继续用它编码！但是，由于我已经不再使用自己的代码，所以我想分享一下我如何进行这个转换的一些细节，特别是我移走的“阶段”，以及我现在做的事情。我还会谈谈我还在为之奋斗的一些事情。

我会提醒人们，我不做很多生产工作。因此，我并不担心旧版浏览器。这使我的需求（可能）不同于你的需求。

我如何使用jQuery

    对我来说，我的绝大多数jQuery使用是：

• 引导页面加载代码

• 听取点击或改变事件的事情

• 从表单字段读取值

• Ajax的东西

• 将html写入DOM

当然，我做的不仅仅是这些，而是就我特别使用jQuery而言，可能涵盖了99％。

页面加载

    几乎所有我从事的应用程序都是从这个美丽开始的：

$(document).ready(function() {    // STUFF HERE});

这是我把它作为一个片段，所以我可以很快把它放在文件中。哎呀，我甚至用自己的代码在网页上抓住了自己，甚至没有做任何javascript。

我用下面的事件监听器替换了这个DOMContentLoaded：

document.addEventListener('DOMContentLoaded', function() {    // STUFF HERE}, false);

MDN文档为这个事件说：

DOMContentLoaded事件在初始HTML文档被完全加载和解析时触发，而不等待样式表，图像和子帧完成加载。

这是一个简单的改变。这是一个更多的打字，但在你的编辑片段可以使这一个问题。但是，请注意，这不是jQuery的document.ready功能的完美替代品。他们的文档提到了这个问题：

大多数浏览器以DOMContentLoaded事件的形式提供类似的功能。但是，jQuery的.ready（）方法在一个重要和有用的方法上有所不同：如果DOM准备就绪，并且浏览器在代码调用.ready（handler）之前触发DOMContentLoaded，则函数处理程序仍将被执行。相比之下，事件触发后添加的DOMContentLoaded事件监听器从不执行。

最后一句话是至关重要的一句话。我从来没有遇到这个问题，但是这是你要记住的。

事件监听器

    我已经证明了这一点，但是你只是简单的使用addEventListener而且你很好。一般的格式是(the thing).addEventListener('name of event', function)，正如我上面所说的，虽然它是一个多点，然后jQuery的版本，它通常是没有什么大不了的。

我遇到的唯一真正的问题是最近出现的问题。想象一下，你想听听产品上的点击事件。现在想象一下产品在初始页面加载后加载。jQuery通过让你监听文档对象上的事件来提供对此的支持，但是指定你只关心目标是否是其中的特定项目。这个基本形式是：

$("#listOfProducts").on("click", ".productThumb", function() {    // STUFF});

我最近不得不在另一个应用程序中这样做，并意识到我不知道如何做到这一点。这是我结束了：

document.addEventListener('click', function(e) {    if(e.target.className !== 'editLink') return;    e.preventDefault();    // STUFF    }, false);

基本上我只是看事件的目标数据，看看它是否对我的逻辑有意义。在上面的例子中，我正在查看是否应用了一个CSS类“editLink”，如果是的话，我继续。

获取DOM项目

    这是最简单的 jQuery使用选择器访问DOM项变得容易：$(selector)。现代浏览器提供类似的支持querySelector和querySelectorAll。querySelector当你知道你是匹配一个项目，如一个表单域或一个div，并将querySelectorAll用于匹配多个项目时会被使用。我不能诚实地记住每一个使用，querySelectorAll虽然我相信我会在将来。

我更喜欢用这个API创建的变量前缀$。举个例子：

let $field1 = document.querySelector('#field1');

let $field2 = document.querySelector('#field2');

这只是提醒我，变量是指向DOM项目的指针。

阅读和编写DOM项目

    因此，在访问DOM中的某些内容之后，我通常需要阅读并设置它们。对于表单域来说，这相当简单 - 只要使用即可.value。我想你会遇到的唯一问题将是复选框和广播领域。我不必担心这个问题，所以我没有必要处理这个问题。

在DOM元素中写入HTML也很简单，而不是$something.html(string)使用$something.innerHTML=string。

再次 - jQuery肯定帮助这里更简单的API和覆盖边缘的情况下，但我已经能够通过上面的例子。

输入Ajax

    好的，所以你会注意到目前为止所涉及的基本的DOM操作。我发现这很容易，当我没有，我只是打了MDN，花几分钟的时间阅读。从完全离开jQuery 的主要事情是与Ajax合作。

用手“做阿贾克斯”并不是非常困难。你可以阅读（当然）MDN - AJAX - 入门。但是，我永远无法记住与XMLHttpRequest物体一起工作的流程。

幸运的是，Fetch API出现了，虽然我仍然有点不稳定，但是我喜欢API的简单性。我已经做了一些博客文章，但是这里有一个简单的例子：

fetch('/data.json').then(res => res.json()).then(res => {    // res is my data});

您可以定期执行GET请求以及带有表单数据的POST。基本上你可以用jQuery或者vanilla XHR做任何你可以用Fetch做的事情。

还剩下什么？

    现在，我可以轻松地获取，阅读和操作DOM项目并执行Ajax，但遇到麻烦的一个领域是DOM遍历。所以，例如，在DOM中找到一些东西，但实际上需要上一个或下一个项目。jQuery让这个简单的东西像.prev()或.next()。有一个很好的资源，这是“你不需要jQuery”的网站之一。网站？youmightnotneedjquery.com。很好地命名，对吗？它的具体实例.prev()和.next()等我很少需要DOM遍历的项目，但我很高兴知道，当我需要它，我可以查找。

另一个有用的资源，和一个易于记住的名称，是plainjs.com。它也包含一个用于翻译代码的“jQuery to not-jQuery”资源索引。

分享能让人感到幸福，点击右上角吧！

长按并识别此中二维码，关注查看历史消息，祝君每天进步！