javascript最基本的函数汇总
我记得早期的JavaScript,要完成任何事情几乎都绕不开一些简单的函数,因为浏览器提供商实现功能有所差异,而且不只是边缘功能,基础功能也一样,如addEventListener和attachEvent。虽然时代变了,但仍有一些函数是每个开发者都应该掌握的,以便于完成某些功能和提高性能。
debounce
对于高耗能事件,debounce函数是一种不错解决方案。如果你不对scroll、resize、和key*事件使用debounce 函数,那么你几乎等同于犯了错误。下面的debounce函数能让你的代码保持高效:
//返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用N毫秒后,再次调用它才会得到执行。如果有传递‘immediate'参数,会马上将函数安排到执行队列中,而不会延迟。 functiondebounce(func,wait,immediate){ vartimeout; returnfunction(){ varcontext=this,args=arguments; varlater=function(){ timeout=null; if(!immediate)func.apply(context,args); }; varcallNow=immediate&&!timeout; clearTimeout(timeout); timeout=setTimeout(later,wait); if(callNow)func.apply(context,args); }; }; //用法 varmyEfficientFn=debounce(function(){ //所有繁重的操作 },250); window.addEventListener('resize',myEfficientFn);
debounce函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。
poll
尽管上面我提及了debounce函数,但如果事件不存在时,你就不能插入一个事件以判断所需的状态,那么就需要每隔一段时间去检查状态是否达到你的要求。
functionpoll(fn,callback,errback,timeout,interval){ varendTime=Number(newDate())+(timeout||2000); interval=interval||100; (functionp(){ //如果条件满足,则执行! if(fn()){ callback(); } //如果条件不满足,但并未超时,再来一次 elseif(Number(newDate())<endTime){ setTimeout(p,interval); } //不匹配且时间消耗过长,则拒绝! else{ errback(newError('timedoutfor'+fn+':'+arguments)); } })(); } //用法:确保元素可见 poll( function(){ returndocument.getElementById('lightbox').offsetWidth>0; }, function(){ //执行,成功的回调函数 }, function(){ //错误,失败的回调函数 } );
Polling在web中已被应用很长时间了,并在将来仍会被使用。
once
有时候,你想让一个给定的功能只发生一次,类似于onload事件。下面的代码提供了你所说的功能:
functiononce(fn,context){ varresult; returnfunction(){ if(fn){ result=fn.apply(context||this,arguments); fn=null; } returnresult; }; } //用法 varcanOnlyFireOnce=once(function(){ console.log('Fired!'); }); canOnlyFireOnce(); //"Fired!" canOnlyFireOnce(); //nada //没有执行指定函数
once函数确保给定函数只能被调用一次,从而防止重复初始化!
getAbsoluteUrl
从一个字符串变量得到一个绝对URL,并不是你想象中这么简单。对于某些URL构造器,如果你不提供必要的参数就会出问题(而有时候你真的不知道提供什么参数)。下面有一个优雅的技巧,只需要你传递一个字符串就能得到相应的绝对URL。
vargetAbsoluteUrl=(function(){ vara; returnfunction(url){ if(!a)a=document.createElement('a'); a.href=url; returna.href; }; })(); //用法 getAbsoluteUrl('/something'); //http://davidwalsh.name/something
a元素的href处理和url处理看似无意义,而return语句返回了一个可靠的绝对URL。
isNative
如果你想知道一个指定函数是否是原生的,或者能不能通过声明来覆盖它。下面这段便于使用的代码能给你答案:
;(function(){ //用于处理传入参数value的内部`[[Class]]` vartoString=Object.prototype.toString; //用于解析函数的反编译代码 varfnToString=Function.prototype.toString; //用于检测宿主构造器(Safari>4;真的输出特定的数组) varreHostCtor=/^[object.+?Constructor]$/; //用一个标准的原生方法作为模板,编译一个正则表达式。 //我们选择'Object#toString'因为它一般不会被污染。 varreNative=RegExp('^'+ //将'Object#toString'强制转为字符串 String(toString) //转义所有指定的正则表达式字符 .replace(/[.*+?^${}()|[]/]/g,'$&') //用'.*?'替换提及的'toString',以保持模板的通用性。 //将'for...'之类的字符替换掉,以兼容Rhino等环境,因为这些环境添加了额外的信息,如方法参数数量。 .replace(/toString|(function).*?(?=()|for.+?(?=])/g,'$1.*?')+'$' ); functionisNative(value){ vartype=typeofvalue; returntype=='function' //用'Function#toString'(fnToString)绕过了值(value)本身的'toString'方法,以免被伪造所欺骗。 ?reNative.test(fnToString.call(value)) //回退到宿主对象的检查,因为某些环境(浏览器)将类型数组(typedarrays)之类的东西当作DOM方法,此时可能不遵循标准的原生正则表达式。 :(value&&type=='object'&&reHostCtor.test(toString.call(value)))||false; } //导出函数 module.exports=isNative; }()); //用法 isNative(alert); //true isNative(myCustomFunction); //false
这个函数虽不完美,但它能完成任务!
insertRule
我们都知道能通过选择器(通过document.querySelectorAll)获取一个NodeList,并可为每个元素设置样式,但有什么更高效的方法为选择器设置样式呢(例如你可以在样式表里完成):
varsheet=(function(){ //创建<style>标签 varstyle=document.createElement('style'); //如果你需要指定媒介类型,则可以在此添加一个media(和/或mediaquery) //style.setAttribute('media','screen') //style.setAttribute('media','onlyscreenand(max-width:1024px)') //WebKithack:( style.appendChild(document.createTextNode('')); //将<style>元素添加到页面 document.head.appendChild(style); returnstyle.sheet; })(); //用法 sheet.insertRule("header{float:left;opacity:0.8;}",1);
这对于一个动态且重度依赖AJAX的网站来说是特别有用的。如果你为一个选择器设置样式,那么你就不需要为每个匹配到的元素都设置样式(现在或将来)。
matchesSelector
我们经常会在进行下一步操作前进行输入校验,以确保是一个可靠值,或确保表单数据是有效的,等等。但我们平时是怎么确保一个元素是否有资格进行进一步操作呢?如果一个元素有给定匹配的选择器,那么你可以使用matchesSelector函数来校验:
functionmatchesSelector(el,selector){ varp=Element.prototype; varf=p.matches||p.webkitMatchesSelector||p.mozMatchesSelector||p.msMatchesSelector||function(s){ return[].indexOf.call(document.querySelectorAll(s),this)!==-1; }; returnf.call(el,selector); } //用法 matchesSelector(document.getElementById('myDiv'),'div.someSelector[some-attribute=true]')
就这样啦,上述7个JavaScript函数是每个开发者都应该时刻记着的。有哪个函数我错过了呢?请把它分享出来!
以上所述就是本文的全部内容了,希望大家能够喜欢。