在 javascript 中編碼的更有效方法

Question

我正在為學校構建一個手表定制器，我對 javascript 很陌生，這段代碼有效但很長，我需要添加更多顏色。 有沒有更有效的方法來編碼？

如果有幫助，將從按鈕調用每個顏色更改。

感謝您提前提供任何幫助。

   ///////////////////////////////////////// Face
  function ChangeFaceRG()
    {
    document.getElementById('face').src = "parts/faces/face roesGold.png";
    };
 function ChangeFaceG()
    {
    document.getElementById('face').src = "parts/faces/face gold.png";
    };
 function ChangeFaceS()
    {
    document.getElementById('face').src = "parts/faces/face silver.png";
    };
///////////////////////////////////////// Frame
  function ChangeFrameRG()
    {
    document.getElementById('frame').src = "parts/frames/frame rosegold.png";
    };
 function ChangeFrameG()
    {
    document.getElementById('frame').src = "parts/frames/frame gold.png";
    };
 function ChangeFrameS()
    {
    document.getElementById('frame').src = "parts/frames/frame silver.png";
    };

    //////////////////////// Hands
  function ChangeHandsRG()
    {
    document.getElementById('hands').src = "parts/hands/hands rose gold.png";
    };
 function ChangeHandsG()
    {
    document.getElementById('hands').src = "parts/hands/hands gold.png";
    };
 function ChangeHandsS()
    {
    document.getElementById('hands').src = "parts/hands/hands silver.png";
    };
////////////////////////////////////////// straps
  function ChangeStrapsRG()
    {
    document.getElementById('straps').src = "parts/straps/straps rose gold.png";
    };
 function ChangeStrapsG()
    {
    document.getElementById('straps').src = "parts/straps/straps gold.png";
    };
 function ChangeStrapsS()
    {
    document.getElementById('straps').src = "parts/straps/straps silver.png";
    };

Answer 1

考慮更通用的方法

由於您的所有調用似乎都在做同樣的事情：定位圖像並為其設置源，因此您可能會將其重構為單個函數：

function SetImage(id, imgSrc) {
    // Find the image by it's `id` attribute and then set the source for that image
    document.getElementById(id).src = imageSrc;
}

這將允許您只指定要定位的元素的id ，然后指定給定圖像的路徑：

<!-- Example usage -->
<button onclick='SetImage("face","parts/faces/face roesGold.png")'>Change Face</button>

Answer 2

您需要將參數傳遞給函數以使其更具可重用性/模塊化。

function ChangeHands(type) {
  document.getElementById('hands').src = `parts/hands/hands${type}.png`
}

然后你可以調用ChangeHands('rosegold.png')

您可以為每個函數、ChangeFace、ChangeHands、ChangeFrame 和 ChangeStraps 執行此操作。 干杯和好問題！

Answer 3

如果您使用的是 es2015：

// Config object, here you create a map between the id and the path
const CONFIG = {
    face: 'faces/face',
    frame: 'frames/frame',
    hands: 'hands/hands',
    straps: 'straps/straps'
}

// Get the correct path based on the provided type and color
const getPath = (type, color) => `parts/${type} ${color}.png`;

// Apply transformation with the path obtained from the `getPath` function 
const change = function (type, color) {
    document.getElementById(type).src = getPath(CONFIG.type, color);
}

// Example usage:
change('face', 'roseGold');

否則（如果您不使用 es2015）您可以將函數替換為如下所示：

function getPath (type, color) {
    return ['parts/', type, ' ', color, '.png'].join('');
}

function change (type, color) {
    document.getElementById(type).src = getPath(CONFIG.type, color);
}

或者只是將字符串與 '+' 操作數連接起來。

這種方法嘗試使用較小的功能並確保每個功能都有一個單一的責任。

Answer 4

StackOverflow 不是解決此類問題的好地方，因為它可以以無限不同的方式解決。 但是，在這里，我會這樣做：

var arrayWithPaths = [
    "parts/hands/hands silver.png",
    "parts/straps/straps rose gold.png",
    //and all other paths here
];

function change(what, toWhat){
    document.getElementById(what+'').src = arrayWithPaths[toWhat];
}

what是帶有您要更改的對象的 id 的字符串。 您使用要使用的所有圖像路徑創建數組。 然后你可以創建toWhat變量來指定你想使用哪個變量來調用change函數。

Answer 5

對於下一個級別的包裝箱和所有條件的數組並循環遍歷它。

ids = new arrary [id1, id2, id3, etc];
srcs = new arrary [src1, src2, src3, etc];
function setImage(id, imgSrc) {
    document.getElementById(id).src = imageSrc;
}
for(i=0; i<ids.length;i++){

setImage(id[i], src[i]);
}

Answer 6

數組和循環

var ids = ["face", "frame", "hands", "straps"]
var colors = ["rose gold", "gold", "silver"] 

ids.forEach(function(id, i, ids) {
     colors.forEach(function(color, i, colors) {
            document.getElementById(id).src = "parts/hands/hands " + color +".png";
     });
});

Answer 7

function Change(folder, part, color) {
  document.getElementById(part).src = "part/" + folder + "/" + part + " " + color + ".png" ;
}

用法：

Change('hands', 'hand', 'rose gold');
Change('frames', 'frame', 'silver');
Change('straps', 'strap', 'gold');
Change('faces', 'face', 'silver');

應該工作，我想。