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 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
javascript实现回到顶部特效
May 06 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 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
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JavaScript DOM基础
2015/04/13 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
教师岗位职责范本
2013/12/29 职场文书
写自荐信三大法宝
2014/01/24 职场文书
保安岗位职责
2014/02/21 职场文书
车间主任岗位职责
2014/03/16 职场文书
《四季》教学反思
2014/04/08 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js