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

小天天天天    前端    698 次    2017-04-11 03:22:31


debounce函数

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

blob.png

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


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

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

blob.png

once 函数

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

blob.png

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


getAbsoluteUrl函数

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

blob.png

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


isNative函数

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

blob.png

blob.png

blob.png

 insertRule函数

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

blob.png

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


matchesSelector函数

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

blob.png


如果你觉得本篇文章对您有帮助,请打赏作者

最新评论

暂无评论
网站数据

网站文章数:301

注册用户数:18

TOP