构建可配置的JavaScript点击计数器并实现加权总计

class ClickCount {
  constructor(obj) {
    this.triggerNode = obj.triggerNode; // 触发点击的按钮
    this.targetNode = obj.targetNode;   // 显示计数的元素
    this.resetNode = obj.resetNode;     // 重置按钮
    this.count = 0;                     // 当前计数
    this.handleClick();
    this.handleCount();
  }

  // 绑定事件监听器
  handleClick() {
    this.triggerNode.addEventListener("click", () =>
      this.handleCount({ count: this.count++ })
    );
    this.resetNode.addEventListener("click", () => this.handleReset());
  }

  // 更新显示计数
  handleCount() {
    this.targetNode.innerHTML = this.count;
  }

  // 重置计数
  handleReset() {
    this.count = 0;
    this.handleCount();
  }
}

// 页面加载后初始化计数器
window.onload = () => {
  const clickBlock = document.querySelectorAll("[data-config-click]");

  clickBlock.forEach((block) => {
    const config = JSON.parse(block.dataset.configClick);
    const { trigger, target, reset } = config.selectors;
    const triggerNode = block.querySelector(trigger);
    const targetNode = block.querySelector(target);
    const resetNode = block.querySelector(reset);

    if (triggerNode && targetNode) {
      new ClickCount({ triggerNode, targetNode, resetNode });
    }
  });
};

<div class="block-wrapper">
  <div class="doctile">
    <div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset"}}'>
      <b class="result"></b>
      <button class="button button-primary" type="button">
        Document Count
      </button>
      <button class="button-reset">
        Reset
      </button>
    </div>
  </div>
  <div class="vidtile"> 
    <div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset"}}'>
      <b class="result"></b>
      <button class="button button-secondary" type="button">
        Verified Videos
      </button>
      <button class="button-reset">
        Reset
      </button>
    </div>
  </div>
</div>
<span class="totaltile">
  <p>Total Units = <span id="total-units">0</span></p>
</span>

<!-- Document Count 计数器：每9次点击总计增加1 -->
<div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset", "weight": 9, "resultElement": "#total-units"}}'>
  <b class="result"></b>
  <button class="button button-primary" type="button">
    Document Count
  </button>
  <button class="button-reset">
    Reset
  </button>
</div>

<!-- Verified Videos 计数器：每次点击总计增加1 -->
<div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset", "weight": 1, "resultElement": "#total-units"}}'>
  <b class="result"></b>
  <button class="button button-secondary" type="button">
    Verified Videos
  </button>
  <button class="button-reset">
    Reset
  </button>
</div>

<!-- 全局总计显示区域 -->
<span class="totaltile">
  <p>Total Units = <span id="total-units">0</span></p>
</span>

window.onload = () => { // 确保DOM加载完成后执行
  class ClickCount {
    constructor(obj) {
      this.triggerNode = obj.triggerNode;
      this.targetNode = obj.targetNode;
      this.resetNode = obj.resetNode;
      this.weight = obj.weight;           // 新增：权重
      this.resultNode = obj.resultNode;   // 新增：总计显示元素
      this.count = 0;
      this.handleClick();
      this.handleCount();
    }

    // 增加总计的方法
    increaseTotal() {
      let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);
      // 计算当前点击数对总计的贡献值（整数部分）
      const weightedCountBefore = parseInt(this.count / this.weight);
      // 移除旧的贡献值，避免重复计算
      currentTotal -= weightedCountBefore;

      // 计算点击后（count + 1）对总计的贡献值
      const weightedCountAfter = parseInt((this.count + 1) / this.weight);
      // 添加新的贡献值
      currentTotal += weightedCountAfter;

      this.resultNode.innerHTML = currentTotal;
    }

    // 减少总计的方法（主要用于重置时回退）
    decreaseTotal() {
      let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);
      // 计算当前点击数对总计的贡献值
      const weightedCount = parseInt(this.count / this.weight);
      // 从总计中减去该贡献值
      currentTotal -= weightedCount;

      this.resultNode.innerHTML = currentTotal;
    }

    // 绑定事件监听器
    handleClick() {
      this.triggerNode.addEventListener("click", () => {
        this.increaseTotal(); // 点击时更新总计
        this.handleCount({
          count: this.count++,
        });
      });
      this.resetNode.addEventListener("click", () => this.handleReset());
    }

    // 更新显示计数
    handleCount() {
      this.targetNode.innerHTML = this.count;
    }

    // 重置计数
    handleReset() {
      this.decreaseTotal(); // 重置时回退总计
      this.count = 0;
      this.handleCount();
    }
  }

  const clickBlock = document.querySelectorAll("[data-config-click]");

  clickBlock.forEach((block) => {
    const config = JSON.parse(block.dataset.configClick);
    const { trigger, target, reset, weight, resultElement } = config.selectors; // 解构新增参数
    const triggerNode = block.querySelector(trigger);
    const targetNode = block.querySelector(target);
    const resetNode = block.querySelector(reset);
    const resultNode = document.querySelector(resultElement); // 获取总计显示元素

    if (triggerNode && targetNode) {
      new ClickCount({
        triggerNode,
        targetNode,
        resetNode,
        resultNode, // 传递总计显示元素
        weight,     // 传递权重
      });
    }
  });
};