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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
使用javascript插入样式
Mar 14 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python内建数据结构详解
2016/02/03 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python 画出来六维图
2019/07/26 Python
卫校中专生的自我评价
2014/01/15 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
质检部经理岗位职责
2014/02/19 职场文书
美化环境标语
2014/06/20 职场文书
债务授权委托书范本
2014/10/17 职场文书
优秀团员个人总结
2015/02/26 职场文书
生产实习心得体会范文
2016/01/22 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js