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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JS函数本身的作用域实例分析
Mar 16 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查看session内容的函数
2008/08/27 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php实现webservice实例
2014/11/06 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
深入理解python对json的操作总结
2017/01/05 Python
Python解惑之整数比较详解
2017/04/24 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
店长岗位的工作内容
2013/11/12 职场文书
财务主管自我鉴定
2014/01/17 职场文书
全运会口号
2014/06/20 职场文书
离职感谢信
2015/01/21 职场文书