在 JavaScript 避免创建多余的变量和代码 - 文章教程

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

发布于 2019-05-22 字数 2424 浏览 1136 评论 0

JavaScript 可以说是当今使用最为广泛的语言,虽然是客户端浏览器脚本,但是使用 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 可以被原型方法例如:mapforEachevery 遍历,那么我们换一种方式去做:

[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

大意是你可以在自动执行的功能做一大堆的处理(一个新的范围变量)不允许泄露,唯一的物品返回或泄露的是预期的返回值,精简你的代码,包括避免额外的变量和JavaScript很容易如果你遵循这些基本做法。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0