用JavaScript編寫此特定函數的更好方法

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 + ")"; } }; 

UPDATE

閱讀您的評論后，我提出了一個基於@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

您可以使用短路布爾值或在使用alpha 三元運算符的情況下使此方法非常短。 方法調用中無需引用window 。 不需要對所有undefined或null進行檢查。 可以引用聲明的值。 在if語句中，將===用作相等比較運算符 ，因為它同時比較比較值和類型。

您的方法的簡短版本：

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 || rValue == "random" !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 －幾乎總是評估為true。我對此進行了更改。）

然后，您的函數主體可以更簡單：

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 + ")";
}