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 相关文章推荐
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
windows实现npm和cnpm安装步骤
Oct 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
模拟xcopy的函数
2006/10/09 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
MSN消息提示类
2006/09/05 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
在python中安装basemap的教程
2018/09/20 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
如何在C# winform中异步调用web services
2015/09/21 面试题
教育科学研究生自荐信
2013/10/09 职场文书
优秀村官事迹材料
2014/01/10 职场文书
两只小狮子教学反思
2014/02/05 职场文书
大学运动会入场词
2014/02/22 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python