本文介绍如何使用Web Components（自定义元素）解决同一页面上显示多个独立库存计数器的问题。通过创建自定义元素，每个计数器拥有独立的初始数量和持久化存储键，确保它们的状态互不影响，并能各自进行倒计时更新，极大提升了组件的复用性和可维护性。
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 件
// 将自定义元素的定义代码放在这里，或者引入一个外部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); }; });产品 C
剩余库存：80 件
在上面的示例中：
产品 A 的计数器从40开始，并将状态持久化到localStorage中名为countdown-one的键。产品 B 的计数器从50开始，但由于没有storage-key属性，它的状态不会被持久化，每次页面刷新都会重置为50。产品 C 的计数器从80开始，并将状态持久化到localStorage中名为countdown-three的键。
每个实例都将独立运行，互不干扰，并且带有storage-key的实例在页面刷新后会从上次保存的状态继续倒计时。
4. 注意事项与总结
浏览器兼容性： 现代浏览器（Chrome, Firefox, Edge, Safari）对Custom Elements的支持良好。对于旧版浏览器，可能需要引入Web Components Polyfills。命名规范： 自定义元素的标签名必须包含一个连字符（-），例如stock-counter，以避免与现有或未来的HTML标签冲突。封装性： 自定义元素提供了强大的封装能力。每个实例都拥有自己的内部状态和行为，不会泄露到全局作用域，也不会与其他组件冲突。可维护性与可读性： 通过将复杂的JavaScript逻辑封装在自定义元素中，HTML变得更加声明性（declarative）和易于理解。开发人员只需关注元素的属性即可配置其行为，而无需深入了解其内部实现。扩展性： 可以根据需求为自定义元素添加更多的属性、方法或事件，以实现更复杂的功能，例如在库存为零时触发一个事件。
通过采用Web Components的自定义元素，我们优雅地解决了同一页面上多个独立库存计数器的实现难题，提供了一个可复用、可维护且高性能的解决方案。
以上就是实现页面多处独立库存计数器：使用Web Components的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527271.html
微信扫一扫 
支付宝扫一扫 
