干货 | 整理了7个必知必会的JavaScript函数

引言

熟悉的朋友都知道，我所分享的图文，基本上都是后端开发相关的技术。

但是web开发是一套综合的技术，牵涉到方方面面的知识。包括Linux服务器，TCP/IP网络，数据库，编程语言，HTML，JS，CSS等前端技术。

很多开发者穷其多年功力，不过只是在一方面有所精通。遑论号称全栈的开发者，真正拿得出手的技术也必凤毛麟角。

今天分享一篇前端JavaScript的基础函数。因为觉得非常有用，通用性强，推荐给大家。

简陋的过去

还记得早期的 JavaScript，你需要使用一个简单的函数，来处理几乎所有的事情。

浏览器供应商对 JS 实现的功能不同，甚至在基本功能上，如 addEventListener 和 attachEvent，都有所分歧。

时代已经改变了，但是每个开发人员在他们的武器库中，仍然应该有一些功能，以方便功能实现。

1 - debounce

当涉及到事件驱动的性能时，debounce函数可以改变游戏规则。

如果您没有使用具有scroll、resize、key* 事件的 debounce 函数，那么您可能没有找到最佳实践。

这里有一个debounce 函数，可大大提高你的代码效率。

debounce 函数不允许在给定的时间框架内多次使用回调。在为频繁触发的事件分配回调函数时，这一点尤其重要。

2 - poll

正如在 debounce 函数中提到的，有时候你不需要插入一个事件，来表示你想要的状态。如果事件不存在，你需要每隔一段时间检查你想要的状态。

下图是 poll 函数的实现：

然后调用的时候使用下面的方式：

poll(function() {
	return document.getElementById('lightbox').offsetWidth > 0;}, 2000, 150).then(function() {
    // Polling done}).catch(function() {
    // Polling timed out, handle the error!});

poll 在 web 上已经很有用了，并且在未来还会继续使用！

3 - once

有时候，您希望某个给定功能只发生一次，这与您使用 onload 事件的方式类似。

once 函数确保一个给定函数只能调用一次，从而防止重复初始化！

4 - getAbsoluteUrl

从变量字符串中获取绝对 URL 并不像您想象的那么容易。有 URL 构造器，但是如果不提供所需的参数，它可能会出现问题。

下面是一个获得绝对 URL 和字符串输入的代码：

这种用法对获取到 href 更为保险。

5 - isNative

用于确定给定的函数是否是本地的，你可以决定是否覆盖它。下面的简便函数能让你认识更为清楚：

方法写的有点儿丑，不过能用。:)

6 - insertRule

我们都知道，可以从选择器中抓取一个节点列表（通过document.querySelectorAll），然后给每个节点一个样式。

但是更有效的是，把这个样式设置成选择器：

这在处理一个动态的、大量使用 ajax 的站点时特别有用。

如果将样式设置为选择器，则不需要考虑样式化可能与该选择器匹配的每个元素。

7 - matchesSelector

我们经常在继续之前验证输入。确保真实的输入值，确保表单数据有效等等。

但是，我们多久才能确保，一个元素符合向前移动的条件呢？

你可以使用 matchesSelector 函数，来验证元素是否属于给定的选择器匹配：

写在最后

好了，轮子都准备完毕了，拿去装车上吧！

Happy coding :-)

我是 @程序员小助手 ，持续分享编程知识，欢迎关注。