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 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
js微信分享API
Oct 11 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
js微信分享接口调用详解
Jul 23 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php计算一个文件大小的方法
2015/03/30 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vue v-model的用法解析
2020/10/19 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python字符遍历的艺术
2008/09/06 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python中随机函数random用法实例
2015/04/30 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
python实现猜拳游戏
2020/03/04 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
采购主管岗位职责
2014/02/01 职场文书
五一晚会主持词
2015/07/01 职场文书
投诉信回复范文
2015/07/03 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang