1. 问题背景与传统方法的局限性
在网页开发中，我们经常需要展示动态变化的数值，例如商品库存、限时抢购剩余数量等。一个常见的需求是在同一页面上显示多个独立的计数器，每个计数器拥有自己的初始值、更新逻辑和持久化状态。
原始的JavaScript实现通常会遇到以下问题：
- ID冲突： 当使用 document.getElementById('qty') 这样的方式获取元素时，id 属性在HTML文档中必须是唯一的。如果尝试复制包含相同 id 的HTML结构和脚本，只有第一个匹配的元素会生效，导致其他计数器无法正常显示或工作。
- 全局变量污染： 脚本中可能存在的全局变量或直接操作特定 id 的行为，使得多个计数器实例之间难以隔离，它们可能会互相干扰，导致状态混乱。
- 代码重复与维护困难： 为了实现多个计数器，开发者可能不得不复制粘贴大量代码并手动修改变量名和ID，这不仅增加了代码量，也使得后续的维护和功能扩展变得极其困难。
2. 解决方案：利用自定义元素（Custom Elements）
为了解决上述问题，我们可以采用Web Components规范中的自定义元素（Custom Elements）。自定义元素允许开发者创建自己的HTML标签，这些标签拥有独立的JavaScript行为、样式和生命周期管理，从而实现高度封装和可重用的组件。
通过自定义元素，我们可以将库存计数器的所有逻辑（包括初始值设置、随机递减、状态持久化）封装到一个新的HTML标签中，例如
2.1 自定义元素 的设计
我们设计的
- quantity： 用于设置计数器的初始库存量。这是一个必需属性，指定了当没有持久化数据时，计数器从哪个数值开始倒计时。
- storage-key： 用于指定在浏览器本地存储（localStorage）中保存当前计数器状态的键名。这是一个可选属性。如果设置了此属性，计数器会尝试从 localStorage 中加载上次保存的值；如果找到有效值且不为 0，则该值将覆盖 quantity 属性设定的初始值，实现状态的持久化。如果未设置 storage-key，则该计数器不会持久化其状态。
使用示例：
在页面中，你只需要像使用普通HTML标签一样放置这些
2.2 自定义元素的实现代码
以下是 stock-counter 自定义元素的完整实现：
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： 如果需要多个计数器独立持久化状态，请务必为每个
元素设置一个唯一的 storage-key。如果多个计数器使用相同的 storage-key，它们将共享同一个 localStorage 条目，导致状态混乱。 - 默认行为： 如果不设置 storage-key 属性，计数器将每次页面加载时都从 quantity 属性指定的初始值开始倒计时，不会持久化状态。
- 浏览器兼容性： 自定义元素在现代浏览器中得到广泛支持。对于旧版浏览器，可能需要引入 polyfill。
-
样式与内容： 自定义元素内部的文本内容（例如
40 中的 40）在 connectedCallback 之后会被 this.textContent = qty; 覆盖。如果需要更复杂的内部结构，可以考虑使用 Shadow DOM。 - 性能考量： 频繁的 localStorage 读写可能会对性能产生轻微影响，但在本例这种低频更新的场景下通常不是问题。
4. 总结
通过采用自定义元素，我们成功地将库存计数器封装成一个独立的、可复用的组件。这种方法不仅解决了在同一页面上显示多个独立计数器的难题，还提高了代码的可维护性、可读性和模块化程度。自定义元素是构建现代、组件化Web应用程序的强大工具，能够帮助开发者创建更健壮、更易于管理的前端解决方案。
