面向HTML表单的含数组JS变量与函数能否复用？

先把你提供的代码贴出来方便分析：

<script> 
var speed = 100; 
var gold = 0; 
gold = parseFloat(gold.toFixed(2)); 
var production = 10; 
production = parseFloat(production.toFixed(0)); 
var price = 100; 
price = parseFloat(price.toFixed(2)); 
document.getElementById("speed").innerHTML=speed; 
document.getElementById("gold").innerHTML = gold; 
document.getElementById("production").innerHTML=production; 
document.getElementById("price").innerHTML=price; 
function dig() { 
  var elem = document.getElem... 
} 
</script>

结论：目前这段代码的复用性极差，几乎没法直接复用 #

主要问题有这几点：

• 全局变量污染：所有核心变量（speed、gold这些）都是全局的，要是页面上其他脚本也用了同名变量，直接就会互相覆盖，数据全乱。
• 硬编码DOM依赖：直接写死了"speed"、"gold"这些DOM元素ID，换个页面或者同一个页面想做第二个挖矿组件，得手动改所有ID，太麻烦。
• 逻辑无封装：初始化和业务逻辑散在全局，没有打包成可调用的单元，每次复用都得复制粘贴一堆代码，还容易漏改细节。
• 未完成的dig函数：从现有代码看，这个函数大概率也是直接依赖全局变量和固定DOM，没法灵活适配不同场景。

怎么改成可复用的代码？ #

最直接的方式是把所有逻辑封装成类或者工厂函数，让每个挖矿组件都是独立的实例，互不干扰。给你写个简化的示例：

class GoldMiner {
  constructor(options) {
    // 允许自定义初始参数，同时设置默认值兜底
    this.speed = options.speed || 100;
    this.gold = options.gold || 0;
    this.production = options.production || 10;
    this.price = options.price || 100;
    
    // 提前获取DOM元素引用，避免重复查询
    this.elements = {
      speed: document.getElementById(options.elementIds.speed),
      gold: document.getElementById(options.elementIds.gold),
      production: document.getElementById(options.elementIds.production),
      price: document.getElementById(options.elementIds.price)
    };

    // 初始化渲染页面
    this.updateDisplay();
  }

  // 统一处理数值格式化和DOM更新的方法
  updateDisplay() {
    this.elements.speed.innerHTML = this.speed;
    this.elements.gold.innerHTML = parseFloat(this.gold.toFixed(2));
    this.elements.production.innerHTML = parseFloat(this.production.toFixed(0));
    this.elements.price.innerHTML = parseFloat(this.price.toFixed(2));
  }

  // 完善后的挖矿逻辑
  dig() {
    // 这里可以根据speed和production计算挖矿收益
    this.gold += this.production / (1000 / this.speed);
    // 每次挖矿后更新页面显示
    this.updateDisplay();
  }
}

// 用法示例1：创建第一个挖矿组件
const miner1 = new GoldMiner({
  elementIds: {
    speed: "miner1-speed",
    gold: "miner1-gold",
    production: "miner1-production",
    price: "miner1-price"
  }
});

// 用法示例2：创建第二个完全独立的挖矿组件，自定义初始参数
const miner2 = new GoldMiner({
  speed: 150,
  production: 15,
  elementIds: {
    speed: "miner2-speed",
    gold: "miner2-gold",
    production: "miner2-production",
    price: "miner2-price"
  }
});

这样改完之后，复用性就很强了：

• 可以在同一个页面创建N个独立的挖矿组件，互相不会干扰
• 每个组件都能自定义初始数值和对应的DOM元素，适配不同场景
• 所有逻辑都封装在类里，维护和修改都很方便
• 统一的updateDisplay方法避免了重复的格式化和DOM操作代码

内容的提问来源于stack exchange，提问作者nicolai olsen