快捷導(dǎo)航

五段實(shí)用的js高級(jí)技巧

更新時(shí)間：2011年12月20日 00:38:40 作者：

五段實(shí)用的js高級(jí)技巧，一些不錯(cuò)的小技巧，學(xué)習(xí)js的朋友可以看看。

技巧一之setTimeout.
應(yīng)用案例:比如你想一個(gè)函數(shù)循環(huán)執(zhí)行10次,怎么辦?以前通常是先setInterval,然后clearInterval,技巧一就是克服這個(gè)問題

 
(function () { 
var i = 0; 
function job() { 
console.log(i++); 
if (i < 10) { 
setTimeout(job, 1000); 
} 
} 
job(); 
})(); 

上面這個(gè)job函數(shù)就只會(huì)乖乖的執(zhí)行10次.然后自動(dòng)停止
技巧二之高效的for循環(huán)
應(yīng)用案例:拋棄傳統(tǒng)的循環(huán)方式

復(fù)制代碼代碼如下:

 
(function () { 
var arr=[]; 
for(var i=arr.length;i--;){ 
doStuff(); 
} 
})(); 

這個(gè)方式為什么高效?
一:少了一個(gè)參數(shù)l=arr.length;
二:for語句中間那個(gè)玩意少進(jìn)行了一次計(jì)算,以前的話是for(i=0;i<l;i++)這樣的話中間的語句會(huì)先比較i<l 然后比較出來的結(jié)果在
跟true 或者false比較,自然多了次計(jì)算
技巧三之高效賦值
應(yīng)用案例:拋棄傳統(tǒng)的if判斷賦值

復(fù)制代碼代碼如下:

 
var i=1,ret; 
ret=i!==1||true; 
console.log(ret); 

以上代碼會(huì)很神奇的告訴你ret會(huì)是true.高效吧不用if(i!==1)了在賦值了
技巧四之強(qiáng)悍的簡(jiǎn)短的attr
應(yīng)用案例:setAttribute,getAttribute.這個(gè)方法不僅可以設(shè)置標(biāo)準(zhǔn)的屬性,還可以設(shè)置任意屬性,兼容好

復(fù)制代碼代碼如下:

 
function attr(elem, name, value) { 
var ret; 
if (value) { 
if (/msie [6-7]\.0/i.test(navigator.userAgent)) { 
ret = elem.getAttributeNode(name); 
if (!ret) { //ie6 7不合法的屬性設(shè)置捕鳥,通過這里可以設(shè)置 
ret = document.createAttribute(name); 
elem.setAttributeNode(ret); 
} 
ret.nodeValue = value + ""; 
} else { 
elem.setAttribute(name, value); 
} 
return elem; 
} else { //ie6 7有得屬性獲取不鳥 
ret = elem.getAttribute(name); 
fixIe = elem.getAttributeNode(name).nodeValue; 
ret = ret ? ret : fixIe ? fixIe : undefined; 
return ret; 
} 
} 

以上方法如何測(cè)試呢?
attr(document.getElementById("test"), "classxx", "xx")
alert(attr(document.getElementById("test"),"classxx"));
技巧五之getElementsByClassName.
應(yīng)用案例 :以前js沒什么框架的時(shí)候,大家都再模仿這個(gè)方法,看看今天我是怎么高效的模仿出它來.這也不愧是js初學(xué)者的經(jīng)典代碼

復(fù)制代碼代碼如下:

 
(function () { 
var getElementsByClassName=function(cls,context){ 
var root = context || document; 
return document.querySelectorAll ? root.querySelectorAll("." + cls) : root.getElementsByClassName ? 
root.getElementsByClassName(cls) : help("*", cls, context); 
} 
var help=function(tagName,cls,context){ 
var root= context || document, 
ret=[],elems,i, 
rcls=new RegExp("^|\\s+"+cls+"\\s+|$"); 
elems = root.getElementsByTagName(tagName || "*"); 
for(i=elems.length;i--;){ 
if(rcls.test(elem[i].className)){ 
ret.push(elems[i]); 
} 
} 
return ret; 
} 
})(); 