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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
Vue清除定时器setInterval优化方案分享
Jul 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邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
js获取form的方法
2015/05/06 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python IDLE入门简介
2017/12/08 Python
Python中optparser库用法实例详解
2018/01/26 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python里反向传播算法详解
2020/11/22 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
公司活动邀请函
2014/01/24 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
工作失职自我检讨书
2015/05/05 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android