JavaScript避免代码重复执行的经验技巧

引言：大型网站代码中的重复执行问题

笔者常通过查阅大型网站的源代码，寻找可复用的设计模式或新颖的工具技巧。然而，在审查这些代码时，一个普遍存在的问题是代码的重复执行与功能的冗余应用。以下整理了几点观察到的常见问题及解决思路，旨在帮助开发者编写出更简洁、高效的JavaScript代码。

避免重复收集DOM元素

重复的收集元素

在JavaScript代码中，最常见的低效模式是重复收集DOM元素。尽管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处理开销。

这只是一部分我经常看到的其它程序员写的有重复问题的例子，你也有这方面的发现吗？