javascript下利用數(shù)組緩存正則表達(dá)式的實(shí)現(xiàn)方法
更新時(shí)間:2009年12月26日 03:06:24 作者:
利用組存大法要提高我們程序的性能,讓我們的正則表達(dá)式的創(chuàng)建于執(zhí)行更有效率。
如果能用字面量創(chuàng)建正則就最好不過,顯然有時(shí)我們不得不使用new RegExp()這種大消耗的創(chuàng)建方法,比如語(yǔ)法高亮與排版就大量用到正則表達(dá)式,要用到的patten越多,需要的時(shí)間就越長(zhǎng),火狐好像是12秒就發(fā)出警告,IE就直接假死。這時(shí)我們就需要利用組存大法要提高我們程序的性能了。
通常擺在我們眼前的如下兩種選擇來作為我們的容器,數(shù)組或?qū)ο?。我這里選擇前者,前者更輕量一點(diǎn)。下面我們就hasClass函數(shù)作性能改進(jìn)。
原來的寫法:
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:
var hasClass = function(ele,cls) {
return ele.className.search(new RegExp('(\\s|^)'+cls+'(\\s|$)') > -1);
}
Prototype.js的實(shí)現(xiàn)我比較滿意,test方法在所有正則方法中是最輕量的(相反,exec是最重量,最慢,最強(qiáng)大):
var hasClass = function(el, cls) {
var classes = el.className;
return (classes > 0) ? (classes == cls ||
new RegExp("(^|\\s)" + cls + "(\\s|$)").test(classes)) : false;
}
到現(xiàn)在為止,基于正則方法的挖掘可謂改無可改,我們祭出緩存大法:
(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需再刷新一下頁(yè)面才能執(zhí)行]
注意如果是代替上面的test2的內(nèi)容
<img src="http://www.dbjr.com.cn/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">將會(huì)是true。
通常擺在我們眼前的如下兩種選擇來作為我們的容器,數(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需再刷新一下頁(yè)面才能執(zhí)行]
注意如果是代替上面的test2的內(nèi)容
<img src="http://www.dbjr.com.cn/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">將會(huì)是true。
相關(guān)文章
JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素焦點(diǎn)的切換實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子
這篇文章介紹了javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子,有需要的朋友可以參考一下2013-09-09移動(dòng)端觸屏幻燈片圖片切換插件idangerous swiper.js
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端觸屏幻燈片圖片切換插件idangerous swiper.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04javascript中window.location.href的用法
window.location.href?是一個(gè)用于獲取當(dāng)前頁(yè)面?URL?或讓瀏覽器跳轉(zhuǎn)到新?URL?的重要方法,本文就詳細(xì)的介紹一下javascript中window.location.href的用法,感興趣的可以了解一下2023-08-08動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來的影響
動(dòng)態(tài)生成的IFRAME,設(shè)置SRC時(shí)的,不同位置帶來的影響。 以下所說的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個(gè)blog中,直接點(diǎn)擊運(yùn)行代碼,和把下面代碼保存到為網(wǎng)頁(yè)在運(yùn)行(以本地文件或域名訪問),效果不一樣。2008-03-03微信小程序異步API為Promise簡(jiǎn)化異步編程的操作方法
把微信小程序異步API轉(zhuǎn)化為Promise。用Promise處理異步操作很方便。下面小編給大家?guī)砹宋⑿判〕绦虍惒紸PI為Promise簡(jiǎn)化異步編程的操作方法,感興趣的朋友一起看看吧2018-08-08js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例
很多網(wǎng)站都有登錄后才能復(fù)制的限制,什么原理呢?css屬性u(píng)ser-select:none,通常會(huì)采用這種方式來禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素,取消此樣式后,就可以選中文本了。想要完整地禁止復(fù)制,還需要通過js控制選擇的內(nèi)容。2023-07-07