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

如果能用字面量创建正则就最好不过，显然有时我们不得不使用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来引用它。

(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);
}
})();
window.onload = function(){
var div1 = document.getElementById("test1");
var div2 = document.getElementById("test2");
alert(hasClass(div1,"test1"))
alert(hasClass(div2,"dd"))
}

测试




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

注意如果是代替上面的test2的内容
<img src="http://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。

赞 (0)

相关推荐

  • javascript客户端解决方案 缓存提供程序

    相信每一个开发者都知道缓存的重要性.从头至尾有缓存的后台(memcached,xcache等.) 来减轻db的压力.对内容分发网络(CDN)缓存中希望你的浏览器缓存那些不止一次的加载资源.当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算). 这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器. Starting Simple 复制代码 代码如下: function CacheProvider() { // values will

  • JavaScript版的TwoQueues缓存模型

    本文所指TwoQueues缓存模型,是说数据在内存中的缓存模型. 无论何种语言,都可能需要把一部分数据放在内存中,避免重复运算.读取.最常见的场景就是JQuery选择器,有些Dom元素的选取是非常耗时的,我们希望能把这些数据缓存起来,不必每次调用都去重新遍历Dom树. 存就存吧,但总得有个量吧!总不能把所有的历史数据都放在内存中,毕竟目前内存的容量还是相当可怜的,就算内存够大,理论上每个线程分配的内存也是有限制的. 那么问题来了,如何才能高效的把真正有用的数据缓存起来呢?这就涉及到淘汰算法,需要

  • 一个简单的JavaScript数据缓存系统实现代码

    复制代码 代码如下: var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; r

  • JavaScript中的常见问题解决方法(乱码,IE缓存,代理)

    解决AJAX中文乱码常用的两种方法 1. 在客户端进行encodeURI(utf-8也可以不做,默认),在服务器端将iso-8859-1编码转为utf-8编码 2.在客户端进行两次encodeURI,在服务器端进行一次转换. 第2种方法能解决问题的原因: 进行两次转换后,在第一次getparameter方法中进行第一次解码,因为解出来的是英文(第一次encode之后的结果),所以不会出问题:第二次使用URLDecoder的decode方法,所以能正常解决这个问题.需要注意的是,在decode方法

  • Javascript Memoization 缓存函数使用说明

    举个例子 复制代码 代码如下: var flower= function(){ var t=0,i=0; for(;i<5000000;i++){ t++; } return t; } flower 返回t的值 假设这个函数需要花费 2-3秒 . 通过 Memoization 函数,再次查找相同的值时,直接获取事先缓存好的 value,立刻返回; Memoization 函数 复制代码 代码如下: var Memoize = function(fn, cache, refetch, obj){

  • javascript的动态加载、缓存、更新以及复用（一）

    javascript的动态加载、缓存、更新以及复用（一）

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了. 目标: 1.  可以方便的引用js文件. 2.  尽量使用各种缓存,避免频繁从服务器读取文件. 3.  如果js文件有更新或者增加.减少几个减少js文件,需要客户端能够自动.立刻更新. 4.  Js

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

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

    如果能用字面量创建正则就最好不过,显然有时我们不得不使用new RegExp()这种大消耗的创建方法,比如语法高亮与排版就大量用到正则表达式,要用到的patten越多,需要的时间就越长,火狐好像是12秒就发出警告,IE就直接假死.这时我们就需要利用组存大法要提高我们程序的性能了. 通常摆在我们眼前的如下两种选择来作为我们的容器,数组或对象.我这里选择前者,前者更轻量一点.下面我们就hasClass函数作性能改进. 原来的写法: 复制代码 代码如下: var hasClass = function

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • JavaScript几种数组去掉重复值的方法推荐

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复.主要是理清思路和考虑下性能.以下方法,网上基本都有,这里只是简单地总结一下. 思路: 1.遍历数组,一一比较,比较到相同的就删除后面的 2.遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 3.任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 4.遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: function ov1(arr)

  • JavaScript移除数组内重复元素的方法

    本文实例讲述了JavaScript移除数组内重复元素的方法.分享给大家供大家参考.具体分析如下: 这段JS代码用于从数组中移除重复的元素,比如: ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'] 去重后返回:s ['apple', 'orange', 'peach', 'strawberry'] 复制代码 代码如下: function removeDuplicates(arr) {     var temp = {};  

  • JavaScript实现数字数组正序排列的方法

    本文实例讲述了JavaScript实现数字数组正序排列的方法.分享给大家供大家参考.具体如下: JS数组的sort方法支持一个函数作为参数,下面的代码演示了JS数组如何实现数字的正序排列 <!DOCTYPE html> <html> <body> <p id="demo">Click the button to sort the array.</p> <button onclick="myFunction()&

  • javascript中去除数组重复元素的实现方法【实例】

    在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现: <script language="javascript"> <!-- /*判断数组中是否存在某个元素的方法*/ function isExistInArr(_array, _element){ if(!_array || !_element) return false; if(!_array.length){ return (_array == _elemen

  • JavaScript实现数字数组按照倒序排列的方法

    本文实例讲述了JavaScript实现数字数组按照倒序排列的方法.分享给大家供大家参考.具体如下: 下面的代码演示了JS数组如何通过sort对数字类型的数组进行倒序排序 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to sort the array. </p> <button onclick="myFunction()"&g

  • javascript下利用arguments实现string.format函数

    下面摘抄一下源码,深入分析一下他的设计实现思路: 复制代码 代码如下: function format(string) { var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])", "g"); return String(string).replace(pattern, function(match, index) { return args

  • javascript下过滤数组重复值的代码

    <script language="javascript">    function getNoRepeat() {        return arguments[0].join('|').match(/(\b[^|]+\b)(?!.*|\1\b)/ig);    }    var tmpArr = [1, 'a', 'ab', 'abc', 'd', 1.2, 'a+b', 'd', 'e', 5, 'a', 1, 'h', 'c', 'ab'];    var ret

  • JavaScript下利用fso判断文件是否存在的代码

    复制代码 代码如下: function ReportFileStatus(filespec) { var fso, s = filespec; fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists(filespec)) s += " exists."; else s += " doesn't exist."; return(s); } 采用客户端的 Fi

随机推荐