在 JavaScript 避免创建多余的变量和代码

Z时代
2024-01-10
分类：IT

JavaScript 可以说是当今使用最为广泛的语言，虽然是客户端浏览器脚本，但是使用 JavaScript 可以完成很多意想不到的效果，由于编程人员的良莠不齐，会出现不可避免的冗余代码。

一般来说，我讨厌程序编码产生多余的变量和代码，一如 WordPress 所推崇的“代码如诗”，一段简短整洁的代码看着让人很舒服，一段代码，从创建代码开始到代码结束，声明了很多变量，其实是不必要的，下面我分享几段代码，来详细的谈谈这个话题。

`Array.prototype.forEach()` instead of `for(var x = ...)`

创建一个 JavaScript 数组，然后通过 for() 循环遍历这个数组，代码如下所示：

var myArray = [1, 2, 3];
for(var x=0, length = myArray.length; x < length; x++) {
    // ...
}
// "x" and "length" are side effects

我们创建了额外的两个变量，X 和 length 用于遍历这个数组，而且在 for() 循环里面，这两个变量是不可避免的，我们一直都是这么编程的。

这种模式的副作用是在最小运行指标，如果不是长度，他们是可利用的在整个范围。Array 可以被原型方法例如：map、forEach 和 every 遍历，那么我们换一种方式去做：

[1, 2, 3].forEach(function(item, index, array) {
    // No side effects! :)
});

上面的代码实现了相同的功能，可是代码精简了不少，看起来更加优美，这就是所谓的“功能性”规划。

自动执行函数

在 JavaScript 中保存私有变量，设置后可以让你避免副作用通过自动执行的功能相同的模式：

// Example from MooTools source...
Browser.Request = (function(){
    var XMLHTTP = function(){
        return new XMLHttpRequest();
    };
    var MSXML2 = function(){
        return new ActiveXObject('MSXML2.XMLHTTP');
    };
    var MSXML = function(){
        return new ActiveXObject('Microsoft.XMLHTTP');
    };
    return Function.attempt(function(){
        XMLHTTP();
        return XMLHTTP;
    }, function(){
        MSXML2();
        return MSXML2;
    }, function(){
        MSXML();
        return MSXML;
    });
})();
// The three vars are stuck in the self-executing function, they don't "leak" out