如何将三个创建差异化Div元素的JavaScript函数合并为单一函数

嘿，作为JS新手能意识到重复代码可以简化，这真的超棒！你这三个创建Div的函数核心逻辑完全一致，只是位置数组、类名、data属性这几个细节不同，咱们把这些可变的部分抽成参数，就能用一个通用函数搞定所有情况啦。

简化思路 #

把每个元素的专属配置（位置选项、类名、data属性名）作为参数传给通用函数，函数内部复用相同的创建、属性设置逻辑，这样既减少重复代码，后续要加新类型的元素也更方便。

修改后的完整代码 #

// 保留你原有的工具函数，这些很实用！
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 createElement(config) {
  // 随机选一个位置
  const posit = config.posits[Math.floor(Math.random() * config.posits.length)]
  const elem = document.createElement("div")
  
  // 设置data属性（用括号语法动态设置属性名）
  elem.dataset[config.dataKey] = true
  // 添加类名
  elem.classList.add(config.className)
  
  worldElem.append(elem)
  
  // 设置CSS自定义属性
  setCustomProperty(elem, "--bottom", 100)
  setCustomProperty(elem, "--left", posit)
  
  return elem // 可选：返回创建好的元素，方便后续操作
}

// 原来的三个函数可以简化成这样，直接调用通用函数并传入对应配置
function createA() {
  createElement({
    posits: [15, 45, 75],
    dataKey: "A",
    className: "A"
  })
}

function createB() {
  createElement({
    posits: [11.5, 23.5, 41.5, 53.5, 71.5, 83.5],
    dataKey: "B",
    className: "B"
  })
}

function createC() {
  createElement({
    posits: [14, 23.5, 44, 53.5, 74, 83.5],
    dataKey: "C",
    className: "C"
  })
}

关键细节说明 #

• 动态data属性：用elem.dataset[config.dataKey]的写法，能根据传入的dataKey（比如"A"、"B"）设置对应的data-A、data-B属性，不用写死。
• 配置对象：把每个元素的独特信息打包成对象，后续要加新元素类型，只需要新增一个类似的配置调用就行，不用复制粘贴整个函数。
• 逻辑复用：创建元素、添加到容器、设置自定义属性这些重复的逻辑都放在通用函数里，只写一次，减少出错概率。

这样修改后，原来的setInterval调用createA()、createB()、createC()的逻辑完全不用改，直接就能用，而且代码简洁多啦！

内容的提问来源于stack exchange，提问作者Walber José Neves