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 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery 选择器部分整理
2009/10/28 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
range 标准化之获取
2011/08/28 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
计算机专业自荐信
2014/05/24 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书