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


Posted in Javascript onApril 17, 2014

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

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

Javascript 相关文章推荐
window.location 对象所包含的属性
Oct 10 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
js与applet相互调用的方法
Jun 22 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
js常用DOM方法详解
Feb 04 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
js中的cookie的读写操作示例详解
Apr 17 #Javascript
巧用replace将文字表情替换为图片
Apr 17 #Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 #Javascript
JS实现div居中示例
Apr 17 #Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
You might like
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
公司募捐倡议书
2014/05/14 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
党员民主评议自我评价
2014/10/20 职场文书
科技活动总结范文
2015/05/11 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电