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 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
JQuery中clone方法复制节点
May 18 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JavaScript实现拖拽和缩放效果
Aug 24 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
详解Vue方法与事件
2017/03/09 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
浅谈js闭包理解
2019/03/28 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Python3基于sax解析xml操作示例
2018/05/22 Python
详解Python中的正则表达式
2018/07/08 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
2015年教师党员公开承诺书
2015/01/22 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书