JavaScript避免代码的重复执行经验技巧分享

我喜欢到一些大型网站上去翻阅它们的原代码，期望能找到一些可以应用到自己的代码中的模式，或发现一些之前从未听说过的工具和技巧。可是，在我查看这些大型网站的源代码时，经常会发现一个问题，那就是重复的代码执行，重复的功能应用。下面就是一些在查看它们的源代码时发现一些问题，把这些分享给大家，希望能让你们更加简洁高效的写出JavaScript代码。
重复的收集元素

我在他们的JavaScript代码里看到的最常见的问题是重复的收集元素。虽然jQuery选择器引擎或querySelectorAll的执行速度都很快，但重复的工作就是会多占用时间和资源。这个问题很浅显，解决的方法如下：


代码如下:

//
$$(".items").addClass("hide");
// ... 后来又 ...
$$(".items").removeClass("hide");

//
var items = $$(".items");
// ... 从这里开始使用这个引用变量!

对那些写出重复执行代码的程序员的谴责我们天天都在做，但仍需要加强。当然，有些重复的动作是无法避免的(比如ajax加载页面)，可是，对于这些情况，我们最好是使用事件代理，而不是直接拉取内容。
重复的条件判断

重复的条件计算很常见，但通常也是有一个通用的模式来避免它们。你可能会看到一段代码写成这样：


代码如下:

var performMiracle = function() {
// 如果浏览器支持A特征...
if(features.someFeature) {

}
// ... 如果不支持
else {

}
};

这是可行的，但不是最高效的代码，上面的条件可能会多次计算。写成下面的样子会更好：


代码如下:

var performMiracle = features.someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff
};

只有一个条件，而且条件计算完成时方法或变量就已经作为结果返回了！
重复的对象创建

相比较重复的操作，重复的对象创建更难发现，通常是表现在正则表达式上。看一下下面的这段代码：


代码如下:

function cleanText(dirty) {
// 去除SCRIPT tags
clean = dirty.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, "");

// Do some more cleaning, maybe whitespace, etc.

return clean;
}

上面的代码会不断的重复创建一个新的(但是相同的)正则表达式对象，对于这种情况，如果你在这个函数的外部创建这个对象，就能避免这种情况的出现：


代码如下:

var scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
function cleanText(dirty) {
// Get rid of SCRIPT tags
clean = dirty.replace(scriptRegex, "");

// Do some more cleaning, maybe whitespace, etc.

return clean;
}

在上面的例子中，正则表达式对象只创建了一次，但多次使用——省了很多CPU处理。

这只是一部分我经常看到的其它程序员写的有重复问题的例子，你也有这方面的发现吗？

赞 (0)

相关推荐

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • js技巧--转义符"\"的妙用

    // blueDestiny, never-online // blueDestiny [at] 126.com 通常,我们在动态给定一个container的innerHTML时,通常是样做的: <div id="divc" /> <SCRIPT LANGUAGE="JavaScript"> var div = document.getElementById("divc"); var html = ""

  • js中字符替换函数String.replace()使用技巧

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象.   replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数.

  • 每日十条JavaScript经验技巧(一)

    1. 不使用script自闭合标签 script中使用自闭合标签,虽然他在XHTML中合法,但是不符合HTML规范,而且得不到某些浏览器的正确解析.我曾经就在引入EXT时使用此方式,导致无法正确执行脚本. <script src="example.js"/> --> <script src="example.js"></script> 2. 将脚本放到</body>前面 如果将脚本文件放到<head>

  • 每日十条JavaScript经验技巧(二)

    1. 非数值类型转数值 使用Number()转换时: undefined会转为NaN 如果字符串以0开始,浏览器会忽略前导0,不会按照八进制进行转换 如果字符串以0x开始,浏览器会按照十六进制转化为十进制返回 如果字符串有字符,除(+,-,.)外都会转为NaN,十六进制时,字符串包含任何非数字字符都返回NaN 如果是对象转换,则对象先使用valueof(),然后按照规则转换.如果无valueOf方法,则调用toString方法,再转换. 使用parseInt()转换时: parseInt会忽略前

  • Javascript技巧之不要用for in语句对数组进行遍历

    一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, 复制代码 代码如下: for(var i in {jqmShow:1,jqmHide:1}) for(var s in this[i]) if(H[this[i][s]]) H[this[i][s]].w[i](this); return F; } 第一个for in遍历的目标是个匿名对象,没有问题. 第二个for in遍历,根据上下文确认t

  • js DIV滚动条随机位置的设置技巧

    style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • JS调试必备的5个debug技巧

    JS调试必备的5个debug技巧

    1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: 复制代码 代码如下: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们. 2. 设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源. 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,

  • Javascript的数组与字典用法与遍历对象的属性技巧

    Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary).先举例看看数组的用法. 复制代码 代码如下: var a = new Array(); a[0] = "Acer"; a[1] = "Dell"; for (var i = 0; i < a.length; i++) { alert(a[i]); } 下面再看一下字典的用法. 复制代码 代码如下: var computer_price = new Array(); co

随机推荐