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 相关文章推荐
cookie中的path与domain属性详解
Dec 18 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
vue通过过滤器实现数据格式化
Jul 20 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中的Swoole
2016/04/05 PHP
非常实用的php验证码类
2016/05/15 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python GUI模拟实现计算器
2020/06/22 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python中加背景音乐如何操作
2020/07/19 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
电焊工工作岗位职责
2014/02/06 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
学校督导评估方案
2014/06/10 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书