JavaScript避免程式碼的重複執行經驗技巧分享_javascript技巧

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

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

複製程式碼 程式碼如下:

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

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

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

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

複製程式碼 程式碼如下:

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

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

}
};

這是可行的，但不是最有效率的程式碼，上面的條件可能會多次計算。寫成下面的樣子會比較好：

複製程式碼 程式碼如下:

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

只有一個條件，而且條件計算完成時方法或變數就已經作為結果回傳了！
重複的物件建立

相比較重複的操作，重複的物件建立更難發現，通常是表現在正規表示式上。看一下下面的這段程式碼：

複製程式碼 程式碼如下:

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

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

return clean;
}

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

複製程式碼 程式碼如下:

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

// Do some more cleaning, maybe whitespace, etc.
>
return clean;
}

在上面的範例中，正規表示式物件只建立了一次，但多次使用－省了許多CPU處理。

這只是一部分我常看到的其它程式設計師寫的有重複問題的例子，你也有這方面的發現嗎？