JavaScript：避免代碼的重復執行

我喜歡到一些大型網站上去翻閱它們的原代碼，期望能找到一些可以應用到自己的代碼中的模式，或發現一些之前從未聽說過的工具和技巧。可是，在我查看這些大型網站的源代碼時，經常會發現一個問題，那就是重復的代碼執行，重復的功能應用。下面就是一些在查看它們的源代碼時發現一些問題，把這些分享給大家，希望能讓你們更加簡潔高效的寫出JavaScript代碼。

重復的收集元素

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

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

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

對那些寫出重復執行代碼的程序員的譴責我們天天都在做，但仍需要加強。當然，有些重復的動作是無法避免的(比如ajax加載頁面)，可是，對于這些情況，我們最好是使用事件代理，而不是直接拉取內容。

重復的條件判斷

重復的條件計算很常見，但通常也是有一個通用的模式來避免它們。你可能會看到一段代碼寫成這樣：

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

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

    }
};

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

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

只有一個條件，而且條件計算完成時方法或變量就已經作為結果返回了！

重復的對象創建

相比較重復的操作，重復的對象創建更難發現，通常是表現在正則表達式上。看一下下面的這段代碼：

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

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

    return clean;
}

上面的代碼會不斷的重復創建一個新的(但是相同的)正則表達式對象，對于這種情況，如果你在這個函數的外部創建這個對象，就能避免這種情況的出現：

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;
}

在上面的例子中，正則表達式對象只創建了一次，但多次使用——省了很多CPU處理。

這只是一部分我經常看到的其它程序員寫的有重復問題的例子，你也有這方面的發現嗎？

(英文：JavaScript: Avoiding Repeated Work.)
來自：http://www.webhek.com/javascript-optimization/