一个梦想着没有浪费 jQuery 的生活的博客

你好。
我是Mandai，负责Wild 开发团队。

使用 JavaScript 进行开发时，可能有很多情况只需安装 jQuery 即可完成工作。
但是，如果您确实只需要一两个功能怎么办？

jQuery 是一个易于使用的库，我想我会继续使用它，但除非我决定完全使用它，否则我认为有其他选择会很好。

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

菜单

 

初稿

• 我想要 $.ready()
• 我想用 $('div#hogehoge > .fuga') 快速检索对象
• 我想要 $('hoge').on()
• 我想要日期选择器()
• 我想要 $('hoge').addClass()

 

我想要 $.ready()

我认为这是 jQuery 最伟大的发明，但你也可以使用 Promises 自己实现它。
如果 window.onload 没有问题，那就没问题了。
然而，让我们通过使用一个只提供ready()的小模块来快速完成这个任务。

• 准备就绪
• 文件就绪
• 文档就绪

有几个候选人，但我认为就是这些。
一般来说，它们都能按预期工作，但浏览器（主要是 IE）兼容性存在一些差异，因此请检查每个站点。

 

我想用 $('div#hogehoge > .fuga') 快速检索对象

这是浏览器的标准并且没问题。

• 如果要指定ID，则getElementById()
• 要指定单个类，请使用 getElementsByClassName()
• 如果要进行复杂的规范，请使用 document.querySelector(), document.querySelectorAll()

这没有问题。

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

但是，除 getElementById() 之外的方法已在不同时间实现，并且某些浏览器不支持。
如果需要覆盖多种浏览器，我认为使用jQuery是一个不错的选择。

检查我可以使用吗

 

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

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

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

 

您可以通过将匿名函数设置为 addEventListener() 的第二个参数来轻松编写此代码，但这种情况的缺点是您无法使用removeEventListener() 删除已注册的侦听器。
为了避免这种情况，请提前将匿名函数声明为第二个参数并注册它。
通过这一步，您将能够识别带有removeEventListener()的函数，并且您将能够删除不再需要的侦听器。

不过，根据与 IE 的兼容性，我认为使用 jQuery 可能是一种选择。

检查我可以使用吗

 

我想要日期选择器()

由于 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); // 以数组形式获取类信息（只读） 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，围绕类的处理变得非常容易。
根据浏览器的不同，此功能可能不可用，因此您需要根据您的要求使用它。

检查我可以使用吗

 

概括

我列出了一些想到的，但请务必检查，因为根据浏览器类型和版本，有些可能可用也可能不可用。

另外，如果您合并各种库来摆脱 jQuery，则会存在实际延长加载时间的陷阱，因此，如果您可以使用一体化解决方案，我认为最好只使用它。

我们会不时添加更多内容。

就是这样。