快捷導(dǎo)航

JavaScript避免代碼的重復(fù)執(zhí)行經(jīng)驗(yàn)技巧分享

更新時(shí)間：2014年04月17日 15:40:29 作者：

經(jīng)常會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，那就是重復(fù)的代碼執(zhí)行，下面就是一些在查看它們的源代碼時(shí)發(fā)現(xiàn)一些問(wèn)題，把這些分享給大家，希望能讓你們更加簡(jiǎn)潔高效的寫(xiě)出JavaScript代碼

我喜歡到一些大型網(wǎng)站上去翻閱它們的原代碼，期望能找到一些可以應(yīng)用到自己的代碼中的模式，或發(fā)現(xiàn)一些之前從未聽(tīng)說(shuō)過(guò)的工具和技巧?？墒牵谖也榭催@些大型網(wǎng)站的源代碼時(shí)，經(jīng)常會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，那就是重復(fù)的代碼執(zhí)行，重復(fù)的功能應(yīng)用。下面就是一些在查看它們的源代碼時(shí)發(fā)現(xiàn)一些問(wèn)題，把這些分享給大家，希望能讓你們更加簡(jiǎn)潔高效的寫(xiě)出JavaScript代碼。
重復(fù)的收集元素

我在他們的JavaScript代碼里看到的最常見(jiàn)的問(wèn)題是重復(fù)的收集元素。雖然jQuery選擇器引擎或querySelectorAll的執(zhí)行速度都很快，但重復(fù)的工作就是會(huì)多占用時(shí)間和資源。這個(gè)問(wèn)題很淺顯，解決的方法如下：

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

 
// 
$$(".items").addClass("hide"); 
// ... 后來(lái)又 ... 
$$(".items").removeClass("hide"); 

// 
var items = $$(".items"); 
// ... 從這里開(kāi)始使用這個(gè)引用變量! 

對(duì)那些寫(xiě)出重復(fù)執(zhí)行代碼的程序員的譴責(zé)我們天天都在做，但仍需要加強(qiáng)。當(dāng)然，有些重復(fù)的動(dòng)作是無(wú)法避免的(比如ajax加載頁(yè)面)，可是，對(duì)于這些情況，我們最好是使用事件代理，而不是直接拉取內(nèi)容。
重復(fù)的條件判斷

重復(fù)的條件計(jì)算很常見(jiàn)，但通常也是有一個(gè)通用的模式來(lái)避免它們。你可能會(huì)看到一段代碼寫(xiě)成這樣：

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

 
var performMiracle = function() { 
// 如果瀏覽器支持A特征... 
if(features.someFeature) { 

} 
// ... 如果不支持 
else { 

} 
}; 

這是可行的，但不是最高效的代碼，上面的條件可能會(huì)多次計(jì)算。寫(xiě)成下面的樣子會(huì)更好：

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

 
var performMiracle = features.someFeature ? function() { 
// Plan A stuff 
} : function() { 
// Plan B stuff 
}; 

只有一個(gè)條件，而且條件計(jì)算完成時(shí)方法或變量就已經(jīng)作為結(jié)果返回了！
重復(fù)的對(duì)象創(chuàng)建

相比較重復(fù)的操作，重復(fù)的對(duì)象創(chuàng)建更難發(fā)現(xiàn)，通常是表現(xiàn)在正則表達(dá)式上?？匆幌孪旅娴倪@段代碼：

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

 
function cleanText(dirty) { 
// 去除SCRIPT tags 
clean = dirty.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, ""); 

// Do some more cleaning, maybe whitespace, etc. 

return clean; 
} 

上面的代碼會(huì)不斷的重復(fù)創(chuàng)建一個(gè)新的(但是相同的)正則表達(dá)式對(duì)象，對(duì)于這種情況，如果你在這個(gè)函數(shù)的外部創(chuàng)建這個(gè)對(duì)象，就能避免這種情況的出現(xiàn)：

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

 
var scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi; 
function cleanText(dirty) { 
// Get rid of SCRIPT tags 
clean = dirty.replace(scriptRegex, ""); 

// Do some more cleaning, maybe whitespace, etc. 

return clean; 
} 

在上面的例子中，正則表達(dá)式對(duì)象只創(chuàng)建了一次，但多次使用——省了很多CPU處理。

這只是一部分我經(jīng)?？吹降钠渌绦騿T寫(xiě)的有重復(fù)問(wèn)題的例子，你也有這方面的發(fā)現(xiàn)嗎？

您可能感興趣的文章: