Question

我开始使用JavaScript和编程。我周围没有很多开发人员可以询问如何做或做到这一点我正在学习，但是我想让一些专业人士看看我的代码并告诉我它有多糟糕。

对Noob的任何评论都将不胜感激。先感谢您！我知道可能有很多这样的课程，但我想学习在我的知识水平上划伤并且不重用某些代码。

此函数返回rgba（r，g，b，a）或rgb（r，g，b）格式的颜色如果“random”是参数，则为每个通道或随机值取值颜色通道：

someColor = nutils.getNewColor(100,200,"random","random");

将返回格式为的字符串：

如果没有传递alpha，则

"rgba(100,232,0.12)"或"rgb(100,200,234)"

这是我写的代码：



window.utils.getNewColor = function (rRange, gRange, bRange, alpha) {
    function rValue() {
                    return Math.round(Math.random() * 255);
                }

                if (!rRange == undefined || rRange == null || typeof rRange === 'string' && rRange == "random") {
                    rRange = rValue();
                }
                if (!gRange == undefined || gRange == null || typeof gRange === 'string' && gRange == "random") {
                    gRange = rValue();
                }
                if (!bRange == undefined || bRange == null || typeof bRange === 'string' && bRange == "random") {
                    bRange = rValue()
                }
                if (typeof alpha === 'string' && alpha == "random") {
                    alpha = Math.round(Math.random() * 100) / 100
                    return "rgba(" + rRange + "," + gRange + "," + bRange + "," + alpha + ")";
                } else if (typeof alpha === 'number' && alpha < 1) {
                    return "rgba(" + rRange + "," + gRange + "," + bRange + "," + alpha + ")";
                }
                else {
                    return "rgb(" + rRange + "," + gRange + "," + bRange + ")";
                }
            };

更新

在阅读完你的评论之后，我想出了一个基于@KooilNic建议的解决方案，不过要稍加修改以理解我对三元运算评估缺乏了解。

以下是修改/更新的代码：

utils.getNewColor = function (rRange, gRange, bRange, alpha) {
    rRange = rRange || Math.round(Math.random() * 255);
    gRange = gRange || Math.round(Math.random() * 255);
    bRange = bRange || Math.round(Math.random() * 255);
    if (alpha === undefined) {
        return "rgb(" + [rRange, gRange, bRange].join(',') + ")";
    } else {
        alpha = alpha && alpha < 1 ? alpha : (Math.round(Math.random() * 100) / 100);
        return "rgba(" + [rRange, gRange, bRange, alpha].join(',') + ")";
    }
};

Answer 1

您可以将此方法设为非常短using short circuit booleans，或者alpha ternary operator。没有必要在方法调用中引用window。对undefined或null的所有检查都是不必要的。可以引用声明的值。在if语句中，使用===作为相等comparison operator，因为它比较了值和类型。

您的方法的较短版本：

utils.getNewColor = function (rRange, gRange, bRange, alpha) {
    rRange = rRange || Math.round(Math.random() * 255;
    gRange = gRange || Math.round(Math.random() * 255;
    bRange = bRange || Math.round(Math.random() * 255;
    alpha  = alpha && alpha < 1 ? alpha : (Math.round(Math.random() * 100) / 100;
    return "rgba(" + [rRange,gRange,bRange,alpha].join(',') + ")";
};

Answer 2

考虑将rValue替换为包含这些条件检查的函数，如下所示：

function genValue(v) {

    if(v == undefined || v == null || v == "random") {
        return Math.round(Math.random() * 255);
    }

    return v;

}

// and later:
rRange = genValue(rRange);
gRange = genValue(gRange);

这应该减少一些代码重复。

另请考虑将构建结果的位置（"rgb(" + ... + ")"）减少到一两个位置。

编辑：

有些人推荐像!rValue || rValue == "random"这样的代码。请注意这一点，就像你为rValue传递0一样，你会得到随机颜色。

Answer 3

比较如下：

typeof rRange === 'string' && rRange == "random"

可以简单地为rRange === "random"，因为===可以避免类型转换。

创建一个封装测试和随机生成的fn将缩短代码。这个函数的名称/概念并不理想，但它可以工作：

function randIfNull(val, maxRandVal) {
    if (val == undefined || val == null || val === "random") {
        return Math.round(Math.random() * (maxRandVal || 255));
    } else {
        return val;
    }
}

（注意：我认为你有rRange == undefined ||等于rRange != undefined - 这几乎总是评估为真。我改变了这个。）

然后你的功能正文可以更简单：

rRange = randIfNull(rRange);
gRange = randIfNull(gRange);
bRange = randIfNull(bRange);

然后你可以在最终陈述中结合一些代码：

if (alpha == "random" || (typeof alpha === 'number' && alpha < 1)) {
    alpha = randIfNull(alpha, 100);
    return "rgba(" + rRange + "," + gRange + "," + bRange + "," + alpha + ")";
}
else {
    return "rgb(" + rRange + "," + gRange + "," + bRange + ")";
}

在JavaScript中编写此特定函数的更好方法

更新

3 个答案:

编辑：