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

2017.05.15

Web系统开发

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

大家好，
我是Mandai，Wild团队负责开发工作的成员。

在使用 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 网站。