JavaScript代码精简与性能优化：避免冗余判断与补丁

JavaScript代码精简与性能优化原则

编写代码时应秉持“吝啬”原则，力求用最少的代码实现最恰当的功能。

例如，当代码中频繁使用 document.getElementById() 时，可以考虑封装一个简洁的 ID 选择器来替代重复调用。

 
function $(Id)
{ 
return document.getElementById(Id);
} 

避免框架补丁，注重代码扩展与重构

其次，在代码维护上要“吝啬”打补丁。不应为了临时实现功能而在现有框架中强行添加逻辑，而应通过扩展框架来实现。如果框架本身无法扩展，则需评估是否进行部分重构。

假设你已有一套完整的表单正则验证框架，若发现某个特定表单的正则表达式在框架中缺失，常见的做法是追加一个 if 判断来快速实现。然而，更优的做法是在验证框架内部扩展该正则规则，从而保持代码结构的清晰与整洁。

优化Ajax请求对象创建步骤

此外，还需“吝啬”代码执行的步骤，减少不必要的重复计算。

以编写 Ajax 代码为例，常见的写法如下：

 
var xmlObject;
function createXMLHTTPRequest()
{ 
if(window.ActiveXObject)
{ 　　 
xmlObject = new ActiveObject("Microsoft.XMLHTTP");
} 
else
{ 　　 
xmlObject = new XMLHTTPRequest();
} 
} 

上述代码在每次生成对象时都会进行浏览器类型判断。实际上，可以在第一次生成对象后“记忆”该结果，后续直接复用，避免重复判断。改进后的代码如下：

 
var _ajax = function(){
_self = this;
} 
_ajax.prototype = {
/** 
/** 构建http请求对象 */
*/ 
_create: function(){
var factories = [
function(){return new XMLHttpRequest();}, //非IE系列
function(){return new ActiveXObject("Microsoft.XMLHTTP");}, //IE
function(){return new ActiveXObject("Msxml2.XMLHTTP");} //IE某些版本
]; 
for (var i = 0; i < factories.length; i++) {
try {
if (factories[i]()) {
return factories[i];
} 
} 
} catch (e) {
continue;
} 
} 
} return factory[2];
}(), 
} 

这段代码表面上看执行步骤比之前更多，但当首次调用 _ajax._create() 后，_ajax._create 会被重新赋值为一个兼容当前浏览器的匿名函数。此后再次调用时，将直接执行该函数，不再进行任何类型判断，从而提升性能。