1. 问题背景与分析
在网页中，我们可能需要在同一页面上展示多个产品或计划的库存倒计时，并且每个倒计时都应独立运行，拥有各自的初始数量和状态持久化能力。原始的javascript脚本通常通过document.getelementbyid('qty')来获取显示库存的元素，并通过localstorage.setitem('saved_countdown', qty)来保存库存值。这种方法存在两个核心问题：
- ID冲突与单一目标： document.getElementById()方法只会返回文档中第一个匹配指定ID的元素。当页面上存在多个具有相同ID（如qty）的元素时，脚本只会更新第一个元素。即使通过修改ID为qty1、qty2等并复制脚本，如果脚本内部仍然引用全局的qtySpan变量或未正确为每个实例绑定其对应的DOM元素，仍可能导致只有一个计数器生效。
- 全局状态共享： localStorage.setItem('saved_countdown', qty)使用了固定的键名saved_countdown。这意味着所有复制的脚本实例都会尝试读写同一个localStorage键，导致它们的库存状态相互覆盖，无法独立持久化。
为了解决这些问题，我们需要一种更模块化、可复用且能够封装自身状态的解决方案。Web Components中的自定义元素（Custom Elements）正是为此而生。
2. 解决方案：利用自定义元素实现独立库存计数器
通过将库存计数器封装为一个自定义元素
2.1 自定义元素 的设计
我们设计一个名为
- quantity： 表示计数器开始倒计时的初始数量。如果localStorage中存在对应的值，该值将优先于此属性。
- storage-key： 一个可选的字符串，用于指定该计数器在localStorage中存储其最新数量的唯一键名。如果未设置此属性，则该计数器将不会持久化其状态。
2.2 自定义元素实现代码
以下是
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标签一样在页面中使用它。
多处独立库存计数器示例
产品库存状态
产品 A
剩余库存：40 件
PHP经典实例(第二版)
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
下载
产品 B (无持久化)
剩余库存：50 件
产品 C
剩余库存：80 件
在上面的示例中：
- 产品 A 的计数器从40开始，并将状态持久化到localStorage中名为countdown-one的键。
- 产品 B 的计数器从50开始，但由于没有storage-key属性，它的状态不会被持久化，每次页面刷新都会重置为50。
- 产品 C 的计数器从80开始，并将状态持久化到localStorage中名为countdown-three的键。
每个
4. 注意事项与总结
- 浏览器兼容性： 现代浏览器（Chrome, Firefox, Edge, Safari）对Custom Elements的支持良好。对于旧版浏览器，可能需要引入Web Components Polyfills。
- 命名规范： 自定义元素的标签名必须包含一个连字符（-），例如stock-counter，以避免与现有或未来的HTML标签冲突。
-
封装性： 自定义元素提供了强大的封装能力。每个
实例都拥有自己的内部状态和行为，不会泄露到全局作用域，也不会与其他组件冲突。 - 可维护性与可读性： 通过将复杂的JavaScript逻辑封装在自定义元素中，HTML变得更加声明性（declarative）和易于理解。开发人员只需关注元素的属性即可配置其行为，而无需深入了解其内部实现。
- 扩展性： 可以根据需求为自定义元素添加更多的属性、方法或事件，以实现更复杂的功能，例如在库存为零时触发一个事件。
通过采用Web Components的自定义元素，我们优雅地解决了同一页面上多个独立库存计数器的实现难题，提供了一个可复用、可维护且高性能的解决方案。
