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实现读取txt文档的脚本
Jul 20 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
微信小程序转化为uni-app项目的方法示例
May 22 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
python字典序问题实例
2014/09/26 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python读取键盘输入的2种方法
2015/06/16 Python
Django返回json数据用法示例
2016/09/18 Python
Python序列操作之进阶篇
2016/12/08 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python cumsum函数的具体使用
2019/07/29 Python
PyTorch预训练的实现
2019/09/18 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
档案管理员岗位职责
2015/02/12 职场文书
小学运动会入场词
2015/07/18 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
python3操作redis实现List列表实例
2021/08/04 Python