一个梦想摆脱浪费 jQuery 的博客

2017.05.15

Web系统开发

1 菜单
2 我想要 $.ready()
3 我想使用 $('div#hogehoge > .fuga') 获取一个对象。
4 我想要 $('hoge').on()
5 我想要 datepicker()
6 我想要 $('hoge').addClass()
7 概括

大家好，
我是开发团队野生队的成员 Mandai。

在使用 JavaScript 进行开发时，很多情况下你可能会想直接安装 jQuery 来完成任务，
但难道就没有一些时候你只需要一两个功能吗？

jQuery 是一个用户友好的库，我想我将来还会继续使用它，但除非我决定大量使用它，否则我觉得有其他选择总是好的。

这次，我想介绍一下你们一直想要的“那个功能”。

菜单

我想要 $.ready()

我认为这是 jQuery 最伟大的发明，但如果你使用 Promise，你可以自己实现。
如果 window.onload 就足够了，那当然也可以。
不过，我们还是使用一个只提供 ready() 方法的小模块来快速完成吧。

有几个候选方案，但这些可能是最好的。
它们基本都能正常工作，但在浏览器（主要是IE浏览器）兼容性方面略有不同，所以请务必检查每个网站。

我想使用 $('div#hogehoge > .fuga') 获取一个对象。

这没问题，因为这是浏览器的标准做法。

如果要指定 ID，请使用 getElementById() 函数。
要指定单个类，请使用 getElementsByClassName()
如果要指定更多详细信息，请使用 document.querySelector() 或 document.querySelectorAll()

这没有问题。

document.querySelector() 功能非常强大，可以接受任何 CSS 选择器，因此您可以通过 ID 选择器进行搜索，但它比 getElementById() 慢。

然而，除了 `getElementById()` 之外的其他方法实现时间不同，并非所有浏览器都支持这些方法。
如果您需要兼容多种浏览器，我认为使用 jQuery 是一个不错的选择。

请查看 Can I Use 网站。

我想要 $('hoge').on()

这也可以使用浏览器的标准 addEventListener() 方法来处理。

var hoge_obj = document.getElementById('hoge'); // 简单版本 hoge_obj.addEventListener('', (e)=>{ // 一些处理 }); // 可以使用 removeEventListener() 管理删除的版本 var hoge_func = (e) => { // 一些处理 }; hoge_obj.addEventListener('click', hoge_func); // 移除监听器 hoge_obj.removeEventListener('click', hoge_func);

可以通过将匿名函数作为 `addEventListener()` 的第二个参数来轻松实现这一点，但缺点是无法使用 `removeEventListener()` 移除已注册的监听器。
为了避免这种情况，您可以预先声明匿名函数作为第二个参数，然后再进行注册。
这样，`removeEventListener()` 就能识别出该函数，从而允许您移除不再需要的监听器。

但是，考虑到与 IE 的兼容性，我认为使用 jQuery 可能是一个可行的选择。

请查看 Can I Use 网站。

我想要 datepicker()

日期选择器是 jQuery 的强项，因此很难找到不依赖 jQuery 的软件包。
这次，我们将介绍两种类型的软件包。

两者之间没有明显的区别，只是设计方向不同，所以了解这两者是很有价值的。

Flatpickr 采用扁平化设计，似乎与 Material Design 非常契合。Pikaday
则带有几分 Bootstrap 的风格，设计简洁。

两者都可以作为 jQuery 模块加载和使用，因此如果您可以接受 jQuery 但还没有准备好使用 jQuery UI，它们可能是一个不错的选择。

我想要 $('hoge').addClass()

使用 jQuery 注册（addClass）和删除（removeClass）类非常简单。
然而，标准 JavaScript 方法的数量已经大幅增加，并且已经实现了可以处理除 className 之外的其他类的接口。

今天我要向大家介绍的就是 classList。

var hoge_obj = document.getElementById('hoge'); hoge_obj.className = 'class_a class_b'; // 获取类信息 console.log(hoge_obj.classList); // 获取类信息数组（只读） console.log(hoge_obj.classList.length); // 由于已被解析并按空格分割，因此返回 2 hoge_obj.classList.add('class_c'); // 添加 class_c hoge_obj.classList.remove('class_b'); // 删除 class_b hoge_obj.classList.toggle('class_d'); // 如果 class_d 不存在，则注册；如果存在，则删除 hoge_obj.classList.contains('class_c'); // 如果 class_c 包含在内，则返回 true

使用 classList 可以显著简化类的处理。
但此功能可能因浏览器而异，因此您需要根据自身需求使用。

请查看 Can I Use 网站。