实现页面多处独立库存计数器：使用Web Components的解决方案-js教程-PHP中文网

实现页面多处独立库存计数器：使用Web Components的解决方案

碧海醫心

发布： 2025-10-07 10:51:30

原创

723人浏览过

实现页面多处独立库存计数器：使用Web Components的解决方案

本文介绍如何使用Web Components（自定义元素）解决同一页面上显示多个独立库存计数器的问题。通过创建<stock-counter>自定义元素，每个计数器拥有独立的初始数量和持久化存储键，确保它们的状态互不影响，并能各自进行倒计时更新，极大提升了组件的复用性和可维护性。

1. 问题背景与分析

在网页中，我们可能需要在同一页面上展示多个产品或计划的库存倒计时，并且每个倒计时都应独立运行，拥有各自的初始数量和状态持久化能力。原始的javascript脚本通常通过document.getelementbyid('qty')来获取显示库存的元素，并通过localstorage.setitem('saved_countdown', qty)来保存库存值。这种方法存在两个核心问题：

ID冲突与单一目标： document.getElementById()方法只会返回文档中第一个匹配指定ID的元素。当页面上存在多个具有相同ID（如qty）的<span>元素时，脚本只会更新第一个元素。即使通过修改ID为qty1、qty2等并复制脚本，如果脚本内部仍然引用全局的qtySpan变量或未正确为每个实例绑定其对应的DOM元素，仍可能导致只有一个计数器生效。
全局状态共享： localStorage.setItem('saved_countdown', qty)使用了固定的键名saved_countdown。这意味着所有复制的脚本实例都会尝试读写同一个localStorage键，导致它们的库存状态相互覆盖，无法独立持久化。

为了解决这些问题，我们需要一种更模块化、可复用且能够封装自身状态的解决方案。Web Components中的自定义元素（Custom Elements）正是为此而生。

2. 解决方案：利用自定义元素实现独立库存计数器

通过将库存计数器封装为一个自定义元素<stock-counter>，我们可以实现完全独立的多个计数器实例。每个实例将拥有自己的属性来管理初始数量和持久化存储键，从而避免全局冲突。

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

我们设计一个名为<stock-counter>的自定义元素，它将具有以下两个关键属性：

quantity： 表示计数器开始倒计时的初始数量。如果localStorage中存在对应的值，该值将优先于此属性。
storage-key： 一个可选的字符串，用于指定该计数器在localStorage中存储其最新数量的唯一键名。如果未设置此属性，则该计数器将不会持久化其状态。

2.2 自定义元素实现代码

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

customElements.define('stock-counter', class extends HTMLElement {
  // 获取当前库存数量的getter
  get quantity() {
    // 检查是否设置了storageKey，并尝试从localStorage获取存储值
    if (this.storageKey !== null) {
      const value = Number(localStorage.getItem(this.storageKey));
      // 如果存储值是有效数字且不为0，则使用存储值
      if (!Number.isNaN(value) && value !== 0) {
        return value;
      }
    }

    // 否则，从元素的quantity属性获取初始值
    const value = Number(this.getAttribute('quantity'));
    // 如果属性值不是有效数字，则返回0
    if (Number.isNaN(value)) {
      return 0;
    }
    return value;
  }

  // 设置库存数量的setter
  set quantity(value) {
    if (!isNaN(value)) {
      // 如果设置了storageKey，则将新值存储到localStorage
      if (this.storageKey !== null) {
        localStorage.setItem(this.storageKey, value);
      }
      // 更新元素的quantity属性
      this.setAttribute('quantity', value);
      // 更新元素的文本内容以显示最新数量
      this.textContent = value; // 确保在设置时也更新显示
    }
  }

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

  // 当元素被添加到文档DOM时调用
  connectedCallback() {
    // 初始化显示数量
    this.textContent = this.quantity;
    // 启动计数器
    this.count();
  }

  // 核心计数逻辑
  count = () => {
    let qty = this.quantity; // 获取当前数量

    if (qty === 0) {
      this.textContent = 0; // 确保显示为0
      return; // 数量为0时停止计数
    }

    // 随机减少1到3个单位
    let parts = Math.floor((Math.random() * 3) + 1);
    // 确保减少的数量不超过当前库存
    if (parts > qty) {
      parts = qty;
    }

    // 更新库存数量（通过setter会自动更新localStorage和属性）
    this.quantity -= parts;

    // 随机延迟15到30秒后再次计数
    const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
    setTimeout(this.count, msec);
  };
});

登录后复制

2.3 代码详解

customElements.define('stock-counter', class extends HTMLElement { ... });
- 这是注册自定义元素的关键。它将stock-counter标签与我们定义的JavaScript类关联起来。
get quantity()：
- 这是一个计算属性。它首先检查是否存在storage-key。如果存在，它会尝试从localStorage中获取对应的值。
- 如果localStorage中的值是有效的数字且不为0，则优先使用该值，实现了状态的持久化。
- 否则，它会回退到从元素的quantity属性获取初始值。
- Number.isNaN()用于判断转换后的值是否为非数字，确保返回有效数字。
set quantity(value)：
- 这是一个设置属性的setter。每当this.quantity被赋值时，这个方法就会被调用。
- 它负责将更新后的值存储到localStorage（如果storage-key存在）。
- 同时，它也会更新元素的quantity属性，并更新元素的textContent，从而在页面上实时显示最新的数量。
get storageKey()：
- 简单地返回storage-key属性的值。
connectedCallback()：
- 这是自定义元素的生命周期回调之一，当元素首次被添加到文档DOM时调用。
- 在这里，我们初始化元素的文本内容为当前数量，并调用count()方法启动倒计时逻辑。
count()：
- 这是核心的倒计时逻辑。它是一个箭头函数，确保this始终指向当前自定义元素实例。
- 获取当前数量，如果为0则停止。
- 随机计算要减少的数量，并确保不会减到负数。
- 通过this.quantity -= parts更新数量。由于quantity是一个setter，这会自动处理localStorage的更新和页面显示。
- 使用setTimeout以随机延迟再次调用自身，实现持续倒计时。

3. 如何使用自定义元素

一旦自定义元素被定义，你就可以像使用任何标准HTML标签一样在页面中使用它。

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

453

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多处独立库存计数器示例</title>
</head>
<body>

    <h1>产品库存状态</h1>

    <div>
        <h2>产品 A</h2>
        <p>剩余库存：<stock-counter quantity="40" storage-key="countdown-one">40</stock-counter> 件</p>
    </div>

    <div>
        <h2>产品 B (无持久化)</h2>
        <p>剩余库存：<stock-counter quantity="50">50</stock-counter> 件</p>
    </div>

    <div>
        <h2>产品 C</h2>
        <p>剩余库存：<stock-counter quantity="80" storage-key="countdown-three">80</stock-counter> 件</p>
    </div>

    <script>
        // 将自定义元素的定义代码放在这里，或者引入一个外部JS文件
        customElements.define('stock-counter', class extends HTMLElement {
          get quantity() {
            if (this.storageKey !== null) {
              const value = Number(localStorage.getItem(this.storageKey));
              if (!Number.isNaN(value) && value !== 0) {
                return value;
              }
            }
            const value = Number(this.getAttribute('quantity'));
            if (Number.isNaN(value)) {
              return 0;
            }
            return value;
          }

          set quantity(value) {
            if (!isNaN(value)) {
              if (this.storageKey !== null) {
                localStorage.setItem(this.storageKey, value);
              }
              this.setAttribute('quantity', value);
              this.textContent = value; // 确保在设置时也更新显示
            }
          }

          get storageKey() {
            return this.getAttribute('storage-key');
          }

          connectedCallback() {
            this.textContent = this.quantity; // 初始化显示
            this.count();
          }

          count = () => {
            let qty = this.quantity;
            if (qty === 0) {
              this.textContent = 0;
              return;
            }
            let parts = Math.floor((Math.random() * 3) + 1);
            if (parts > qty) {
              parts = qty;
            }
            this.quantity -= parts;
            const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
            setTimeout(this.count, msec);
          };
        });
    </script>

</body>
</html>

登录后复制

在上面的示例中：

产品 A 的计数器从40开始，并将状态持久化到localStorage中名为countdown-one的键。
产品 B 的计数器从50开始，但由于没有storage-key属性，它的状态不会被持久化，每次页面刷新都会重置为50。
产品 C 的计数器从80开始，并将状态持久化到localStorage中名为countdown-three的键。

每个<stock-counter>实例都将独立运行，互不干扰，并且带有storage-key的实例在页面刷新后会从上次保存的状态继续倒计时。

4. 注意事项与总结

浏览器兼容性： 现代浏览器（Chrome, Firefox, Edge, Safari）对Custom Elements的支持良好。对于旧版浏览器，可能需要引入Web Components Polyfills。
命名规范： 自定义元素的标签名必须包含一个连字符（-），例如stock-counter，以避免与现有或未来的HTML标签冲突。
封装性： 自定义元素提供了强大的封装能力。每个<stock-counter>实例都拥有自己的内部状态和行为，不会泄露到全局作用域，也不会与其他组件冲突。
可维护性与可读性： 通过将复杂的JavaScript逻辑封装在自定义元素中，HTML变得更加声明性（declarative）和易于理解。开发人员只需关注元素的属性即可配置其行为，而无需深入了解其内部实现。
扩展性： 可以根据需求为自定义元素添加更多的属性、方法或事件，以实现更复杂的功能，例如在库存为零时触发一个事件。