作家
登录

javascript下利用数组缓存正则表达式的实现方法

作者: 来源:www.28hudong.com 2013-03-30 02:00:07 阅读 我要评论

如果能用字面量创建正则就最好不过,显然有时我们不得不使用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://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。

  推荐阅读

  jQuery中的常用事件总结

1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.o>>>详细阅读


本文标题:javascript下利用数组缓存正则表达式的实现方法

地址:http://www.17bianji.com/kaifa2/JS/27370.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)