javascript下利用数组缓存正则表达式的实现方法
更新时间：2009年12月26日 03:06:24 作者：
利用组存大法要提高我们程序的性能，让我们的正则表达式的创建于执行更有效率。
如果能用字面量创建正则就最好不过，显然有时我们不得不使用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="https://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。
通常摆在我们眼前的如下两种选择来作为我们的容器，数组或对象。我这里选择前者，前者更轻量一点。下面我们就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="https://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。
相关文章
这篇文章主要介绍了JS实现方向键切换输入框焦点的方法,涉及javascript鼠标事件及页面元素焦点的切换实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章介绍了javascript 实现键盘上下左右功能的小例子，有需要的朋友可以参考一下2013-09-09
移动端触屏幻灯片图片切换插件idangerous swiper.js
这篇文章主要为大家详细介绍了移动端触屏幻灯片图片切换插件idangerous swiper.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
JavaScript代码在web应用程序中经常用到，但是很多开发者忽视了一些性能方面的知识，如何编写高性能javascript代码呢？接下来，小编跟大家一起学习2015-10-10
javascript中window.location.href的用法
window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,本文就详细的介绍一下javascript中window.location.href的用法,感兴趣的可以了解一下2023-08-08
动态生成的IFRAME，设置SRC时的，不同位置带来的影响。 以下所说的是在IE7下运行的。IE6下也是同样。 在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。2008-03-03
RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。这篇文章给大家简单介绍了Require.js与Sea.js的区别，感兴趣的朋友一起看看吧2018-08-08
把微信小程序异步API转化为Promise。用Promise处理异步操作很方便。下面小编给大家带来了微信小程序异步API为Promise简化异步编程的操作方法，感兴趣的朋友一起看看吧2018-08-08
很多网站都有登录后才能复制的限制，什么原理呢？css属性user-select:none，通常会采用这种方式来禁止复制文本。但浏览开发者工具-审查元素，取消此样式后，就可以选中文本了。想要完整地禁止复制，还需要通过js控制选择的内容。2023-07-07
在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下2023-02-02
最新评论