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 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
vue父子组件间引用之$parent、$children
May 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 和 HTML
2006/10/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
JS自动适应的图片弹窗实例
2013/06/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python变量命名的7条建议
2019/07/04 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
家长学校教学计划
2015/01/19 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers