> 웹 프론트엔드 > JS 튜토리얼 > javascript_javascript 기술 하에 배열 캐시 정규식을 사용하는 구현 방법

javascript_javascript 기술 하에 배열 캐시 정규식을 사용하는 구현 방법

WBOY
풀어 주다: 2016-05-16 18:38:03
원래의
1323명이 탐색했습니다.

如果能用字面量创建正则就最好不过,显然有时我们不得不使用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的内容
javascript_javascript 기술 하에 배열 캐시 정규식을 사용하는 구현 방법将会是true。
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿