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的面向对象(一)
Nov 09 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
如何提高数据访问速度
Dec 26 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
ES6中的Javascript解构的实现
Oct 30 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
一段实时更新的时间代码
2006/07/07 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
js解决movebox移动问题
2016/03/29 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Python 列表list使用介绍
2014/11/30 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
校庆活动策划方案
2014/06/05 职场文书
英文演讲稿开场白
2014/08/25 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript