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 计算当天是本年本月的第几周
Mar 22 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 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使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
node.js中的require使用详解
2014/12/15 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python中实现php的var_dump函数功能
2015/01/21 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
找工作求职信
2014/07/07 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
授权委托书
2014/09/17 职场文书
结婚十年感言
2015/07/31 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
68句权威创业名言
2019/08/26 职场文书
六年级作文之自救
2019/12/19 职场文书