构建可复用库存计数器：使用自定义元素实现多实例显示

1. 问题背景与传统方法的局限性

在网页开发中，我们经常需要展示动态变化的数值，例如商品库存、限时抢购剩余数量等。一个常见的需求是在同一页面上显示多个独立的计数器，每个计数器拥有自己的初始值、更新逻辑和持久化状态。

原始的JavaScript实现通常会遇到以下问题：

• ID冲突： 当使用 document.getElementById('qty') 这样的方式获取元素时，id 属性在HTML文档中必须是唯一的。如果尝试复制包含相同 id 的HTML结构和脚本，只有第一个匹配的元素会生效，导致其他计数器无法正常显示或工作。
• 全局变量污染： 脚本中可能存在的全局变量或直接操作特定 id 的行为，使得多个计数器实例之间难以隔离，它们可能会互相干扰，导致状态混乱。
• 代码重复与维护困难： 为了实现多个计数器，开发者可能不得不复制粘贴大量代码并手动修改变量名和ID，这不仅增加了代码量，也使得后续的维护和功能扩展变得极其困难。

2. 解决方案：利用自定义元素（Custom Elements）

为了解决上述问题，我们可以采用Web Components规范中的自定义元素（Custom Elements）。自定义元素允许开发者创建自己的HTML标签，这些标签拥有独立的JavaScript行为、样式和生命周期管理，从而实现高度封装和可重用的组件。

通过自定义元素，我们可以将库存计数器的所有逻辑（包括初始值设置、随机递减、状态持久化）封装到一个新的HTML标签中，例如 <stock-counter>。

2.1 自定义元素 <stock-counter> 的设计

我们设计的 <stock-counter> 元素将包含以下两个核心属性：

1. quantity： 用于设置计数器的初始库存量。这是一个必需属性，指定了当没有持久化数据时，计数器从哪个数值开始倒计时。
2. storage-key： 用于指定在浏览器本地存储（localStorage）中保存当前计数器状态的键名。这是一个可选属性。如果设置了此属性，计数器会尝试从 localStorage 中加载上次保存的值；如果找到有效值且不为 0，则该值将覆盖 quantity 属性设定的初始值，实现状态的持久化。如果未设置 storage-key，则该计数器不会持久化其状态。

使用示例：

<!-- 一个带有初始值40和持久化键的库存计数器 -->
<stock-counter quantity="40" storage-key="countdown-one"></stock-counter>

<!-- 一个带有初始值50，但不进行状态持久化的库存计数器 -->
<stock-counter quantity="50"></stock-counter>

<!-- 另一个带有初始值80和持久化键的库存计数器 -->
<stock-counter quantity="80" storage-key="countdown-three"></stock-counter>

在页面中，你只需要像使用普通HTML标签一样放置这些 <stock-counter> 元素，它们就会独立运行并显示各自的库存倒计时。

2.2 自定义元素的实现代码

以下是 stock-counter 自定义元素的完整实现：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

customElements.define('stock-counter', class extends HTMLElement {
  // 获取当前库存量
  get quantity() {
    // 1. 检查是否存在 storage-key 并且 localStorage 中有保存的值
    if (this.storageKey !== null) {
      const value = Number(localStorage.getItem(this.storageKey));

      // 如果是有效的数字且不为0，则使用 localStorage 中的值
      if (!Number.isNaN(value) && value !== 0) {
        return value;
      }
    }

    // 2. 否则，从 quantity 属性获取初始值
    const value = Number(this.getAttribute('quantity'));

    // 如果 quantity 属性无效，则默认为0
    if (Number.isNaN(value)) {
      return 0;
    }

    return value;
  }

  // 设置库存量
  set quantity(value) {
    if (!isNaN(value)) {
      // 如果设置了 storage-key，则将新值保存到 localStorage
      if (this.storageKey !== null) {
        localStorage.setItem(this.storageKey, value);
      }

      // 更新元素的 quantity 属性
      this.setAttribute('quantity', value);
    }
  }

  // 获取 storage-key 属性值
  get storageKey() {
    return this.getAttribute('storage-key');
  }

  // 当元素被添加到文档DOM时调用
  connectedCallback() {
    this.count(); // 启动计数器
  }

  // 核心计数逻辑
  count = () => {
    const qty = this.quantity; // 获取当前库存量
    this.textContent = qty;     // 更新元素的显示文本

    if (qty === 0) {
      return; // 如果库存为0，停止计数
    }

    // 随机减少的库存量 (1到3之间)
    let parts = Math.floor((Math.random() * 3) + 1);

    // 确保减少量不超过当前库存
    if (parts > qty) {
      parts = qty;
    }

    this.quantity -= parts; // 更新库存量 (会触发 set quantity 方法，自动保存到 localStorage)

    // 随机延迟时间 (15到30秒之间)
    const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
    setTimeout(this.count, msec); // 延迟后再次调用 count 方法
  };
});

2.3 代码详解

• customElements.define('stock-counter', class extends HTMLElement { ... });

  • 这是注册自定义元素的标准方式。第一个参数是自定义标签的名称（必须包含连字符），第二个参数是定义该元素行为的类。
  • class extends HTMLElement 表示我们的自定义元素继承自标准的 HTMLElement 接口，从而拥有所有HTML元素的默认行为和生命周期方法。

• get quantity() 和 set quantity(value)

  • 这两个是JavaScript的存取器（Getter/Setter）。它们允许我们像访问普通属性一样访问 quantity，但在背后执行复杂的逻辑。
  • get quantity()：负责获取当前库存值。它首先检查 storage-key 是否存在，并尝试从 localStorage 中加载持久化值。如果 localStorage 中有有效值，则优先使用它；否则，它会回退到从HTML元素的 quantity 属性中获取初始值。
  • set quantity(value)：负责更新库存值。当 this.quantity = newValue 被调用时，这个 setter 会被触发。它会将新值保存到 localStorage（如果 storage-key 存在），并更新HTML元素的 quantity 属性。

• get storageKey()

  • 一个简单的 getter，用于方便地获取 storage-key 属性的值。

• connectedCallback()

  • 这是自定义元素的生命周期方法之一，当元素被添加到文档DOM时会自动调用。
  • 我们在这里调用 this.count() 来启动库存计数器。

• count = () => { ... };

  • 这是核心的计数逻辑。它获取当前库存、更新元素的文本内容、随机减少库存，并使用 setTimeout 在随机延迟后再次调用自身，实现持续的倒计时效果。
  • 注意 this.quantity -= parts; 这一行，它会触发前面定义的 set quantity 方法，从而自动将更新后的库存值保存到 localStorage 中。

3. 注意事项与最佳实践

• 唯一 storage-key： 如果需要多个计数器独立持久化状态，请务必为每个 <stock-counter> 元素设置一个唯一的 storage-key。如果多个计数器使用相同的 storage-key，它们将共享同一个 localStorage 条目，导致状态混乱。
• 默认行为： 如果不设置 storage-key 属性，计数器将每次页面加载时都从 quantity 属性指定的初始值开始倒计时，不会持久化状态。
• 浏览器兼容性： 自定义元素在现代浏览器中得到广泛支持。对于旧版浏览器，可能需要引入 polyfill。
• 样式与内容： 自定义元素内部的文本内容（例如 <stock-counter>40</stock-counter> 中的 40）在 connectedCallback 之后会被 this.textContent = qty; 覆盖。如果需要更复杂的内部结构，可以考虑使用 Shadow DOM。
• 性能考量： 频繁的 localStorage 读写可能会对性能产生轻微影响，但在本例这种低频更新的场景下通常不是问题。

4. 总结

通过采用自定义元素，我们成功地将库存计数器封装成一个独立的、可复用的组件。这种方法不仅解决了在同一页面上显示多个独立计数器的难题，还提高了代码的可维护性、可读性和模块化程度。自定义元素是构建现代、组件化Web应用程序的强大工具，能够帮助开发者创建更健壮、更易于管理的前端解决方案。

以上就是构建可复用库存计数器：使用自定义元素实现多实例显示的详细内容，更多请关注php中文网其它相关文章！