1. 问题背景与传统方法局限性
在网页开发中，我们经常需要展示动态变化的数值，例如商品库存、活动剩余名额等。当页面上只有一个这样的计数器时，使用简单的JavaScript配合DOM元素的ID属性即可实现。然而，当需要在同一页面上展示多个独立的计数器时，传统方法往往会遇到挑战。
最初的实现方式可能如下所示，它通过一个全局的元素和一个脚本来管理库存：
这种方法在只有一个计数器时工作良好。但当尝试通过复制脚本并更改ID（如qty1, qty2等）来创建多个计数器时，会发现只有第一个或某一个计数器能够正常工作。其根本原因在于：
- ID的唯一性问题： document.getElementById()方法只会返回页面上第一个匹配指定ID的元素。即使你为每个计数器设置了不同的ID，但每个脚本实例都试图操作一个名为qtySpan的变量，并且可能由于作用域或执行顺序问题，导致它们最终都指向同一个DOM元素，或者只有第一个脚本成功绑定。
- 全局状态共享： 原始脚本中的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 代码解析
-
customElements.define('stock-counter', class extends HTMLElement { ... });
- 这是定义自定义元素的标准语法。'stock-counter'是自定义元素的标签名，必须包含连字符。
- class extends HTMLElement 表示我们的自定义元素继承自HTMLElement，从而拥有所有标准HTML元素的特性。
-
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属性与内部状态同步。
-
get quantity()： 这个getter负责获取当前计数器的数量。它遵循一个优先级逻辑：
-
storageKey getter
- 简单地返回storage-key属性的值。这个属性用于指定localStorage中存储该计数器状态的键名。
-
connectedCallback()
-
count = () => { ... };
- 这是实现随机递减的核心逻辑。
- this.textContent = qty;：将当前数量显示在自定义元素内部。
- 随机递减逻辑：parts变量用于生成每次递减的数量（1到3之间）。
- this.quantity -= parts;：更新计数器的数量。注意这里调用的是我们自定义的quantity setter，它会自动处理localStorage的更新。
- setTimeout(this.count, msec);：使用setTimeout实现递归调用，每隔一段随机时间（15到30秒）执行一次递减，模拟库存缓慢减少的场景。
3. 如何使用自定义元素
一旦自定义元素被定义，你就可以像使用任何标准HTML标签一样在页面中使用它。
多库存计数器示例
产品库存状态
产品A库存: 在上面的示例中：
- 每个
标签都代表一个独立的库存计数器。 - 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应用程序的强大工具。
