自定义元素打造独立库存计数器

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

在网页开发中，我们经常需要展示动态变化的数值，例如商品库存、活动剩余名额等。当页面上只有一个这样的计数器时，使用简单的JavaScript配合DOM元素的ID属性即可实现。然而，当需要在同一页面上展示多个独立的计数器时，传统方法往往会遇到挑战。

最初的实现方式可能如下所示，它通过一个全局的元素和一个脚本来管理库存：

<span class="qty" id="qty"></span>

<script>
    const setQty = (qty) => {
        qtySpan.innerHTML = qty;

        if (qty == 0) return;

        let parts = Math.floor((Math.random() * 3) + 1);
        if (parts > qty) parts = qty;

        const msec =  Math.floor(((Math.random() * 15) + 15) * 1000);
        qty -= parts;

        // Save the updated quantity in localStorage
        localStorage.setItem('saved_countdown', qty);

        setTimeout(() => setQty(qty), msec);
    }

    // Get the saved countdown value from localStorage, or use default value of 57 if not found
    const defaultQty = localStorage.getItem('saved_countdown') ?? 57;

    const qtySpan = document.getElementById('qty');

    // Set the initial value of the quantity
    setQty(defaultQty);
</script>

这种方法在只有一个计数器时工作良好。但当尝试通过复制脚本并更改ID（如qty1, qty2等）来创建多个计数器时，会发现只有第一个或某一个计数器能够正常工作。其根本原因在于：

1. ID的唯一性问题： document.getElementById()方法只会返回页面上第一个匹配指定ID的元素。即使你为每个计数器设置了不同的ID，但每个脚本实例都试图操作一个名为qtySpan的变量，并且可能由于作用域或执行顺序问题，导致它们最终都指向同一个DOM元素，或者只有第一个脚本成功绑定。
2. 全局状态共享： 原始脚本中的localStorage.setItem('saved_countdown', qty);使用了固定的键名'saved_countdown'。这意味着所有计数器实例都会尝试读写同一个localStorage条目，导致它们的状态相互覆盖，无法独立保存和恢复。

为了解决这些问题，我们需要一种更模块化、更具封装性的方法来创建可复用的UI组件，而Web Components中的自定义元素（Custom Elements）正是为此而生。

2. 解决方案：利用自定义元素

自定义元素允许我们定义自己的HTML标签，并为其关联特定的JavaScript行为和样式。通过这种方式，每个计数器都可以成为一个独立的组件，拥有自己的内部状态和逻辑，互不干扰。

我们将创建一个名为的自定义元素，它将具备以下特性：

• 独立的计数逻辑： 每个实例都将运行自己的倒计时逻辑。
• 可配置的初始数量： 通过quantity属性设置计数器的起始值。
• 独立的持久化存储： 通过storage-key属性为每个计数器指定一个唯一的localStorage键名，实现状态的独立保存和恢复。

2.1 自定义元素的核心代码

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

customElements.define('stock-counter', class extends HTMLElement {
  // quantity 属性的 getter 方法
  get quantity() {
    // 1. 检查是否设置了 storage-key 并且 localStorage 中有存储的值
    if (this.storageKey !== null) {
      const value = Number(localStorage.getItem(this.storageKey));

      // 如果存储的值是有效的数字且不为 0，则优先使用它
      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;
  }

  // quantity 属性的 setter 方法
  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 属性的 getter 方法
  get storageKey() {
    return this.getAttribute('storage-key');
  }

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

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

    if (qty === 0) {
      return; // 数量为 0 时停止计数
    }

    let parts = Math.floor((Math.random() * 3) + 1); // 随机生成递减数量 (1-3)

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

    this.quantity -= parts; // 递减数量，同时触发 setter 更新 localStorage 和属性

    const msec = Math.floor(((Math.random() * 15) + 15) * 1000); // 随机生成下一次递减的间隔时间 (15-30秒)
    setTimeout(this.count, msec); // 在指定时间后再次调用 count 方法
  };
});

2.2 代码解析

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

   • 这是定义自定义元素的标准语法。'stock-counter'是自定义元素的标签名，必须包含连字符。
   • class extends HTMLElement 表示我们的自定义元素继承自HTMLElement，从而拥有所有标准HTML元素的特性。

2. quantity getter/setter

   • get quantity()： 这个getter负责获取当前计数器的数量。它遵循一个优先级逻辑：
     • 优先从localStorage获取： 如果设置了storage-key属性，并且localStorage中存在一个有效且不为0的值，则使用该值。这确保了页面刷新后计数器能从上次的状态恢复。
     • 其次从quantity属性获取： 如果localStorage中没有有效值，则从HTML标签的quantity属性中获取初始值。
     • 最后默认为0： 如果quantity属性值无效（例如非数字），则默认为0。
   • set quantity(value)： 这个setter负责设置计数器的数量。
     • 它会将新值存储到localStorage（如果storage-key已设置）。
     • 同时，它会更新元素的quantity属性，确保DOM属性与内部状态同步。

3. storageKey getter

   • 简单地返回storage-key属性的值。这个属性用于指定localStorage中存储该计数器状态的键名。

4. connectedCallback()

   • 这是一个Web Components的生命周期回调函数，当自定义元素首次被添加到文档DOM时，浏览器会自动调用它。
   • 在这里，我们调用this.count()来启动计数器。

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

   • 这是实现随机递减的核心逻辑。
   • this.textContent = qty;：将当前数量显示在自定义元素内部。
   • 随机递减逻辑：parts变量用于生成每次递减的数量（1到3之间）。
   • this.quantity -= parts;：更新计数器的数量。注意这里调用的是我们自定义的quantity setter，它会自动处理localStorage的更新。
   • setTimeout(this.count, msec);：使用setTimeout实现递归调用，每隔一段随机时间（15到30秒）执行一次递减，模拟库存缓慢减少的场景。

3. 如何使用自定义元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多库存计数器示例</title>
    <style>
        stock-counter {
            display: inline-block; /* 使其表现得像行内块元素 */
            padding: 5px 10px;
            margin: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            font-size: 1.2em;
            font-weight: bold;
            min-width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>产品库存状态</h1>

    <div>
        产品A库存: <stock-counter quantity="40" storage-key="countdown-product-a"></stock-counter>
    </div>
    <div>
        产品B库存: <stock-counter quantity="50" storage-key="countdown-product-b"></stock-counter>
    </div>
    <div>
        产品C库存: <stock-counter quantity="80" storage-key="countdown-product-c"></stock-counter>
    </div>
    <div>
        产品D库存 (无持久化): <stock-counter quantity="25"></stock-counter>
    </div>

    <!-- 将自定义元素的定义脚本放在 body 结束标签前，确保 DOM 元素已加载 -->
    <script>
        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);
            }
          }

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

          connectedCallback() {
            this.count();
          }

          count = () => {
            const qty = this.quantity;
            this.textContent = qty;

            if (qty === 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>

在上面的示例中：

• 每个标签都代表一个独立的库存计数器。
• quantity属性设置了每个计数器的初始库存量。
• storage-key属性为每个计数器提供了唯一的localStorage键名，确保它们的状态可以独立地保存和恢复。
• 第四个计数器没有设置storage-key，这意味着它的状态不会被持久化，每次页面加载都会从quantity="25"开始。

4. 注意事项与总结

• 浏览器兼容性： 自定义元素是Web Components规范的一部分，现代浏览器（Chrome, Firefox, Edge, Safari）对其支持良好。对于旧版浏览器，可能需要引入Polyfill。
• storage-key的重要性： 如果你需要计数器在页面刷新后保持其状态，务必为每个独立的实例提供一个唯一的storage-key。否则，它们仍可能共享localStorage中的同一个存储位置。
• 默认行为： 如果省略storage-key属性，计数器将不会将状态保存到localStorage，每次页面加载都会从quantity属性指定的初始值开始。
• CSS样式： 自定义元素默认是行内元素，你可以通过CSS display属性（如display: block;或display: inline-block;）来控制其布局和样式。

通过采用自定义元素，我们成功地将复杂的、相互独立的计数器逻辑封装成可复用的HTML标签。这种方法不仅解决了传统脚本在多实例场景下的问题，还极大地提升了代码的模块化、可读性和可维护性，是构建现代Web应用程序的强大工具。

今天关于《自定义元素打造独立库存计数器》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！