|
|
通常擺在我們眼前的如下兩種選擇來作為我們的容器，數(shù)組或?qū)ο?。我這里選擇前者，前者更輕量一點(diǎn)。下面我們就hasClass函數(shù)作性能改進(jìn)。
原來的寫法：
復(fù)制代碼 代碼如下:
var hasClass = function(ele,cls) {
return ele.className.match(new RegExp('(//s|^)'+cls+'(//s|$)'));
}
雖然簡(jiǎn)短，但做了太多假設(shè)了，因?yàn)樵赜袝r(shí)是未必有className，這時(shí)直接返回false就行了。而且match是返回一個(gè)數(shù)組，和我們期望的布爾值多少有點(diǎn)出入（它在我以前的程序運(yùn)行良好，完全拜Javascript的自動(dòng)轉(zhuǎn)換所賜）。我們用search代替match：
復(fù)制代碼 代碼如下:
var hasClass = function(ele,cls) {
return ele.className.search(new RegExp('(//s|^)'+cls+'(//s|$)') > -1);
}
Prototype.js的實(shí)現(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);
}
})();
如果這個(gè)正則以前創(chuàng)建過，就有以前的，沒有再創(chuàng)建，因此在大量匹配的算法中非常有優(yōu)勢(shì)。放入閉包中是為了防止命名沖突，誰(shuí)會(huì)料到后面會(huì)不會(huì)殺出一個(gè)同名的全局變量c來？!使用和原來的一樣，因?yàn)槲覀兪峭ㄟ^window來引用它。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
注意如果是代替上面的test2的內(nèi)容
<img src="http://www.jb51.NET/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">將會(huì)是true。
JavaScript技術(shù)：javascript下利用數(shù)組緩存正則表達(dá)式的實(shí)現(xiàn)方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
