我可以将这 3 个功能减少到只有一个并创建 3 个不同的东西吗？

Question

这些函数将创建 div，并且 A、B 和 C 将具有不同的左侧位置（如在数组中）和具有不同尺寸的不同类。另一个函数将在设定的时间间隔内调用它们，并将以相同的速度随时间减少所有“--bottom”（它们将向下移动）。我有一种感觉，这些功能可以简化为一个，但我是新手javascript。

function getCustomProperty(elem,prop){
    return parseFloat(getComputedStyle(elem).getPropertyValue(prop)) || 0
}

function setCustomProperty(elem,prop,value){
    elem.style.setProperty(prop, value)
}

function incrementCustomProperty(elem,prop,inc){
    setCustomProperty(elem,prop, getCustomProperty(elem,prop)+inc)
}
const worldElem = document.querySelector("[data-world]")
function createA() {
    let posits = [15,45,75]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const A = document.createElement("div")
    A.dataset.A = true
    A.classList.add("A")
    worldElem.append(A)
    setCustomProperty(A, "--bottom", 100)
    setCustomProperty(A, "--left", posit)
}
function createB() {
    let posits = [11.5,23.5,41.5,53.5,71.5,83.5]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const B = document.createElement("div")
    B.dataset.B = true
    B.classList.add("B")
    worldElem.append(B)
    setCustomProperty(B, "--bottom", 100)
    setCustomProperty(B, "--left", posit)
}

function createC() {
    let posits = [14,23.5,44,53.5,74,83.5]
    let posit = posits[Math.floor(Math.random()*posits.length)]
    const C = document.createElement("div")
    C.dataset.C = true
    C.classList.add("C")
    worldElem.append(C)
    setCustomProperty(C, "--bottom", 100)
    setCustomProperty(C, "--left", posit)
}

Answer 1

比较您的三个函数 A、B 和 C 时，似乎有两个不同的值：

ID（“A”、“B”或“C”）
posits数组

因此，您可以将该信息作为参数传递给函数。要么作为两个单独的参数，要么作为一个组合该信息的对象。

例如：

function create(config) {
    let [[id, posits]] = Object.entries(config);
    let posit = posits[Math.floor(Math.random()*posits.length)];
    const div = document.createElement("div");
    div.dataset[id] = true;
    div.classList.add(id);
    worldElem.append(div);
    setCustomProperty(div, "--bottom", 100);
    setCustomProperty(div, "--left", posit);
}

var A = [15,45,75];
var B = [11.5,23.5,41.5,53.5,71.5,83.5];
var C = [14,23.5,44,53.5,74,83.5];

// Example calls:
create({A});
create({B});
create({C});

我可以将这 3 个功能减少到只有一个并创建 3 个不同的东西吗？

Can I reduce this 3 functions to only one and create 3 distincts things?

javascript

simplify