本文详细介绍了如何使用Web Components中的自定义元素（Custom Elements）来解决在同一页面上显示多个独立库存计数器的问题。通过封装计数逻辑和状态管理到可重用的标签中，每个计数器都能拥有独立的初始数量、随机递减逻辑以及通过localStorage实现的状态持久化，有效避免了传统脚本因ID冲突和全局状态共享导致的问题，提升了组件的模块化和可维护性。
1. 问题背景与传统方法局限性
在网页开发中，我们经常需要展示动态变化的数值，例如商品库存、活动剩余名额等。当页面上只有一个这样的计数器时，使用简单的JavaScript配合DOM元素的ID属性即可实现。然而，当需要在同一页面上展示多个独立的计数器时，传统方法往往会遇到挑战。
最初的实现方式可能如下所示，它通过一个全局的元素和一个脚本来管理库存：
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);
这种方法在只有一个计数器时工作良好。但当尝试通过复制脚本并更改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属性与内部状态同步。
storageKey getter
简单地返回storage-key属性的值。这个属性用于指定localStorage中存储该计数器状态的键名。
connectedCallback()
这是一个Web Components的生命周期回调函数，当自定义元素首次被添加到文档DOM时，浏览器会自动调用它。在这里，我们调用this.count()来启动计数器。
count = () => { … };
这是实现随机递减的核心逻辑。this.textContent = qty;：将当前数量显示在自定义元素内部。随机递减逻辑：parts变量用于生成每次递减的数量（1到3之间）。this.quantity -= parts;：更新计数器的数量。注意这里调用的是我们自定义的quantity setter，它会自动处理localStorage的更新。setTimeout(this.count, msec);：使用setTimeout实现递归调用，每隔一段随机时间（15到30秒）执行一次递减，模拟库存缓慢减少的场景。
3. 如何使用自定义元素
一旦自定义元素被定义，你就可以像使用任何标准HTML标签一样在页面中使用它。
多库存计数器示例 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; }产品库存状态
产品A库存:产品B库存:产品C库存:产品D库存 (无持久化):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); }; });
在上面的示例中：
每个标签都代表一个独立的库存计数器。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应用程序的强大工具。
以上就是利用自定义元素实现页面多处独立库存计数器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527365.html
微信扫一扫 
支付宝扫一扫 
