快捷導(dǎo)航

javascript下利用數(shù)組緩存正則表達(dá)式的實現(xiàn)方法

更新時間：2009年12月26日 03:06:24 作者：

利用組存大法要提高我們程序的性能，讓我們的正則表達(dá)式的創(chuàng)建于執(zhí)行更有效率。

如果能用字面量創(chuàng)建正則就最好不過，顯然有時我們不得不使用new RegExp()這種大消耗的創(chuàng)建方法，比如語法高亮與排版就大量用到正則表達(dá)式，要用到的patten越多，需要的時間就越長，火狐好像是12秒就發(fā)出警告，IE就直接假死。這時我們就需要利用組存大法要提高我們程序的性能了。

通常擺在我們眼前的如下兩種選擇來作為我們的容器，數(shù)組或?qū)ο?。我這里選擇前者，前者更輕量一點(diǎn)。下面我們就hasClass函數(shù)作性能改進(jìn)。
原來的寫法：

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

 
var hasClass = function(ele,cls) { 
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 

雖然簡短，但做了太多假設(shè)了，因為元素有時是未必有className，這時直接返回false就行了。而且match是返回一個數(shù)組，和我們期望的布爾值多少有點(diǎn)出入（它在我以前的程序運(yùn)行良好，完全拜javascript的自動轉(zhuǎn)換所賜）。我們用search代替match：

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

 
var hasClass = function(ele,cls) { 
return ele.className.search(new RegExp('(\\s|^)'+cls+'(\\s|$)') > -1); 
} 

Prototype.js的實現(xiàn)我比較滿意，test方法在所有正則方法中是最輕量的(相反，exec是最重量，最慢，最強(qiáng)大)：

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

 
var hasClass = function(el, cls) { 
var classes = el.className; 
return (classes > 0) ? (classes == cls || 
new RegExp("(^|\\s)" + cls + "(\\s|$)").test(classes)) : false; 
} 

到現(xiàn)在為止，基于正則方法的挖掘可謂改無可改，我們祭出緩存大法：

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

 
(function(){ 
var c={}; 
window.hasClass=function(el, cls){ 
if(!c[cls]){c[cls]=new RegExp("(^|\\s)"+cls+"($|\\s)");} 
return el.className && c[cls].test(el.className); 
} 
})(); 

如果這個正則以前創(chuàng)建過，就有以前的，沒有再創(chuàng)建，因此在大量匹配的算法中非常有優(yōu)勢。放入閉包中是為了防止命名沖突，誰會料到后面會不會殺出一個同名的全局變量c來？!使用和原來的一樣，因為我們是通過window來引用它。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

注意如果是代替上面的test2的內(nèi)容
<img src="http://www.dbjr.com.cn/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">將會是true。

您可能感興趣的文章: