7个基本的js函数_网站前端开发_前端开发者

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

7个基本的js函数我记得早期的JavaScript,要完成任何事情几乎都绕不开一些简单的函数,因为浏览器提供商实现功能有所差异,而且不只是边缘功能,基础功能也一样,如addEventListener和attachEvent。虽然时代变了,但仍有一些函数是每个开发者都应该掌握的,以便于完成某些功能和提高性能。对于高耗能事件,debounce函数是一种不错解决方案。如果你不对scroll、resize、和key*事件使用debounce函数,那么你几乎等同于犯了错误。下面的debounce函数能让你的代码保持高效:返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用N毫秒后,再次调用它才会得到执行。如果有传递‘immediate’参数,会马上将函数安排到执行队列中,而不会延迟。

functiondebounce(func,wait,immediate){
var timeout;
returnfunction(){
var context=this,
args=arguments;
var later=function(){
timeout=null;
if(!immediate)func.apply(context,args);
};
var callNow=immediate&&!timeout;
clearTimeout(timeout);
timeout=setTimeout(later,wait);
if(callNow)func.apply(context,args);
};
};
用法
var myEfficientFn=debounce(function(){
所有繁重的操作
},250);
window.addEventListener(‘resize’,myEfficientFn);
123456789101112131415161718192021返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用N毫秒后,再次调用它才会得到执行。如果有传递‘immediate’参数,会马上将函数安排到执行队列中,而不会延迟。
functiondebounce(func,wait,immediate){
var timeout;
returnfunction(){
var context=this,
args=arguments;
var later=function(){
timeout=null;
if(!immediate)func.apply(context,args);
};
var callNow=immediate&&!timeout;
clearTimeout(timeout);
timeout=setTimeout(later,wait);
if(callNow)func.apply(context,args);
};
};
用法
var myEfficientFn=debounce(function(){
所有繁重的操作
},250);
window.addEventListener(‘resize’,myEfficientFn);
debounce函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。尽管上面我提及了debounce函数,但如果事件不存在时,你就不能插入一个事件以判断所需的状态,那么就需要每隔一段时间去检查状态是否达到你的要求。
functionpoll(fn,callback,errback,timeout,interval){
var endTime=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(){
错误,失败的回调函数
});
1234567891011121314151617181920212223242526272829303132
functionpoll(fn,callback,errback,timeout,interval){
var endTime=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中已被应用很长时间了,并在将来仍会被使用。有时候,你想让一个给定的功能只发生一次,类似于onload事件。下面的代码提供了你所说的功能:
functiononce(fn,context){
var result;
returnfunction(){
if(fn){
result=fn.apply(context||this,arguments);
fn=null;
}
returnresult;
};
}
用法
var canOnlyFireOnce=once(function(){
console.log(‘Fired!’);
});
canOnlyFireOnce();
“Fired!”
canOnlyFireOnce();
nada没有执行指定函数123456789101112131415161718192021
functiononce(fn,context){
var result;
returnfunction(){
if(fn){
result=fn.apply(context||this,arguments);
fn=null;
}
returnresult;
};
}
用法
var canOnlyFireOnce=once(function(){
console.log(‘Fired!’);
});
canOnlyFireOnce();
“Fired!”
canOnlyFireOnce();
nada没有执行指定函数once函数确保给定函数只能被调用一次,从而防止重复初始化!从一个字符串变量得到一个绝对URL,并不是你想象中这么简单。对于某些URL构造器,如果你不提供必要的参数就会出问题(而有时候你真的不知道提供什么参数)。下面有一个优雅的技巧,只需要你传递一个字符串就能得到相应的绝对URL。
var getAbsoluteUrl=(function(){
var a;
returnfunction(url){
if(!a)a=document.createElement(‘a’);
a.href=url;
returna.href;
};
})();
用法getAbsoluteUrl(‘/something’);
http://davidwalsh.name/something12345678910111213
var getAbsoluteUrl=(function(){
var a;
returnfunction(url){
if(!a)a=document.createElement(‘a’);
a.href=url;
returna.href;
};
})();
用法getAbsoluteUrl(‘/something’);
http://davidwalsh.name/somethinga元素的href处理和url处理看似无意义,而
return语句返回了一个可靠的绝对URL。如果你想知道一个指定函数是否是原生的,或者能不能通过声明来覆盖它。下面这段便于使用的代码能给你答案:;
(function(){
用于处理传入参数value的内部`[[Class]]`
var toString=Object.prototype.toString;
用于解析函数的反编译代码
var fnToString=Function.prototype.toString;
用于检测宿主构造器(Safari>4;
真的输出特定的数组)
var reHostCtor=/^[object.+?Constructor]$/;
用一个标准的原生方法作为模板,编译一个正则表达式。我们选择’Object#toString’
因为它一般不会被污染。
var reNative=RegExp(‘^’+将’Object#toString’
强制转为字符串String(toString)转义所有指定的正则表达式字符.replace(/[.*+?^${}()|[]/]/g,’$&’)用’.*?’
替换提及的’toString’,
以保持模板的通用性。将’for…’
之类的字符替换掉,以兼容Rhino等环境,因为这些环境添加了额外的信息,如方法参数数量。.replace(/toString|(function).*?(?=()|for.+?(?=])/g,’$1.*?’)+’$’);
functionisNative(value){
var type=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);
trueisNative(myCustomFunction);
false123456789101112131415161718192021222324252627282930313233343536373839;
(function(){
用于处理传入参数value的内部`[[Class]]`
var toString=Object.prototype.toString;
用于解析函数的反编译代码
var fnToString=Function.prototype.toString;
用于检测宿主构造器(Safari>4;
真的输出特定的数组)
var reHostCtor=/^[object.+?Constructor]$/;
用一个标准的原生方法作为模板,编译一个正则表达式。我们选择’Object#toString’
因为它一般不会被污染。
var reNative=RegExp(‘^’+将’Object#toString’
强制转为字符串String(toString)转义所有指定的正则表达式字符.replace(/[.*+?^${}()|[]/]/g,’$&’)用’.*?’
替换提及的’toString’,
以保持模板的通用性。将’for…’
之类的字符替换掉,以兼容Rhino等环境,因为这些环境添加了额外的信息,如方法参数数量。.replace(/toString|(function).*?(?=()|for.+?(?=])/g,’$1.*?’)+’$’);
functionisNative(value){
var type=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);
trueisNative(myCustomFunction);
false这个函数虽不完美,但它能完成任务!我们都知道能通过选择器(通过document.querySelectorAll)获取一个NodeList,并可为每个元素设置样式,但有什么更高效的方法为选择器设置样式呢(例如你可以在样式表里完成):
var sheet=(function(){
创建<style>标签
var style=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);12345678910111213141516171819
var sheet=(function(){
创建<style>标签
var style=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函数来校验:
functionmatchesSelector(el,selector){
var p=Element.prototype;
var f=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]’)12345678910
functionmatchesSelector(el,selector){
var p=Element.prototype;
var f=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函数是每个开发者都应该时刻记着的。
有哪个函数我错过了呢?

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

» 本文来自:前端开发者 » 《7个基本的js函数_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2359.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!