javascript下利用數組緩存正則表達式的實現方法

2019-11-21 00:52:17

字體：大中小

來源：轉載

供稿：網友

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

通常擺在我們眼前的如下兩種選擇來作為我們的容器，數組或對象。我這里選擇前者，前者更輕量一點。下面我們就hasClass函數作性能改進。
原來的寫法：

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

注意如果是代替上面的test2的內容
<img src="http://m.survivalescaperooms.com/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">將會是true。

上一篇：javascript 最常用的10個自定義函數[推薦]

下一篇：js 創建一個浮動div的代碼