我记得数年前,只要我们编写JavaScript,都必须用到几个常用的函数,比如,addEventListener 和 attachEvent,并不是为了很超前的技术和功能,只是一些基本的任务,原因是各种浏览器之间的差异造成的。时间过去了这么久,技术在不断的进步,仍然有一些JavaScript函数是几乎所有Web程序员必备的,或为了性能,或为了功能。

debounce函数

防止高频调用的 debounce 函数对于那些执行事件驱动的任务来说是必不可少的提高性能的函数。如果你在使用scroll, resize, key*等事件触发执行任务时不使用降频函数,也行你就犯了重大的错误。下面这个降频函数 debounce 能让你的代码变的高效:

WEB开发者必备的7个JavaScript函数_html

这个 debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次,以此降低它的执行频率。当遇到高频触发的事件时,这样的限制显得尤为重要。 

设定时间/频率循环检测函数

上面提到的 debounce 函数是借助于某个事件的触发。但有时候并没有这样的事件可用,那我们只能自己写一个函数来每隔一段时间检查一次。

WEB开发者必备的7个JavaScript函数_html_02


 

once 函数

很多时候,我们只希望某种动作只能执行一次,就像是我们使用 once函数 来限定只在加载完成时执行一次。下面这个函数就能让你的操作执行一次后就不会再重复执行。

WEB开发者必备的7个JavaScript函数_Web_03

这个 once 函数能够保证你提供的函数只执行唯一的一次,防止重复执行。 

getAbsoluteUrl函数

获取链接的绝对地址并不像你想象的那么简单。下面就是一个非常实用的函数,能根据你输入的相对地址,获取绝对地址:

WEB开发者必备的7个JavaScript函数_加载_04

这里使用了 a 标签 href 来生成完整的绝对URL,十分的可靠。 

 isNative函数

很多第三方js脚本都会在全局变量里引入新的函数,有些甚至会覆盖掉系统的原生函数,下面这个方法就是来检查是不是原生函数的:

WEB开发者必备的7个JavaScript函数_Web_05


WEB开发者必备的7个JavaScript函数_加载_06

这个方法虽然不是那么的简洁,但还是可以完成任务的!

 insertRule函数

有时候我们会使用一个CSS选择器(比如 document.querySelectorAll)来获取一个 NodeList ,然后给它们每个依次修改样式。其实这并不是一种高效的做法,高效的做法是用JavaScript新建一段CSS样式规则:

WEB开发者必备的7个JavaScript函数_加载_07

这些做法的效率非常高,在一些场景中,比如使用ajax新加载一段html时,使用上面这个方法,你不需要操作新加载的html内容。

matchesSelector函数

判断网页元素是否具有某种属性和样式 

WEB开发者必备的7个JavaScript函数_加载_08

就是这7个JavaScript函数,每个Web程序员都应该知道怎么用它们。你可以在评论里写出其它你认为必备的函数,分享出来哦。