新闻中心

实现页面多处独立库存计数器：使用Web Components的解决方案

2025-10-07
浏览次数：次
返回列表

实现页面多处独立库存计数器：使用Web Components的解决方案

本文介绍如何使用Web Components（自定义元素）解决同一页面上显示多个独立库存计数器的问题。通过创建自定义元素，每个计数器拥有独立的初始数量和持久化存储键，确保它们的状态互不影响，并能各自进行倒计时更新，极大提升了组件的复用性和可维护性。

1. 问题背景与分析

在网页中，我们可能需要在同一页面上展示多个产品或计划的库存倒计时，并且每个倒计时都应独立运行，拥有各自的初始数量和状态持久化能力。原始的j*ascript脚本通常通过document.getelementbyid('qty')来获取显示库存的元素，并通过localstorage.setitem('s*ed_countdown', qty)来保存库存值。这种方法存在两个核心问题：

  1. ID冲突与单一目标： document.getElementById()方法只会返回文档中第一个匹配指定ID的元素。当页面上存在多个具有相同ID（如qty）的元素时，脚本只会更新第一个元素。即使通过修改ID为qty1、qty2等并复制脚本，如果脚本内部仍然引用全局的qtySpan变量或未正确为每个实例绑定其对应的DOM元素，仍可能导致只有一个计数器生效。
  2. 全局状态共享： localStorage.setItem('s*ed_countdown', qty)使用了固定的键名s*ed_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标签与我们定义的J*aScript类关联起来。
  • 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标签一样在页面中使用它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多处独立库存计数器示例</title>
</head>
<body>

    <h1>产品库存状态</h1>

    <div>
        <h2>产品 A</h2>
        <p>剩余库存：<stock-counter quantity="40" storage-key="countdown-one">40</stock-counter> 件</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/learn/2528">
                            <img src="https://img.php.cn/upload/webcode/000/000/000/5a28fc979bf0e712.png" alt="PHP经典实例(第二版)">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/learn/2528">PHP经典实例(第二版)</a>
                            <p>PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="PHP经典实例(第二版)">
                                <span>470</span>
                            </div>
                        </div>
                        <a href="/xiazai/learn/2528" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="PHP经典实例(第二版)">
                        </a>
                    </div>
                
    </div>

    <div>
        <h2>产品 B (无持久化)</h2>
        <p>剩余库存：<stock-counter quantity="50">50</stock-counter> 件</p>
    </div>

    <div>
        <h2>产品 C</h2>
        <p>剩余库存：<stock-counter quantity="80" storage-key="countdown-three">80</stock-counter> 件</p>
    </div>

    <script>
        // 将自定义元素的定义代码放在这里，或者引入一个外部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);
          };
        });
    </script>

</body>
</html>

在上面的示例中：

  • 产品 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标签冲突。
  • 封装性： 自定义元素提供了强大的封装能力。每个实例都拥有自己的内部状态和行为，不会泄露到全局作用域，也不会与其他组件冲突。
  • 可维护性与可读性： 通过将复杂的J*aScript逻辑封装在自定义元素中，HTML变得更加声明性（declarative）和易于理解。开发人员只需关注元素的属性即可配置其行为，而无需深入了解其内部实现。
  • 扩展性： 可以根据需求为自定义元素添加更多的属性、方法或事件，以实现更复杂的功能，例如在库存为零时触发一个事件。

通过采用Web Components的自定义元素，我们优雅地解决了同一页面上多个独立库存计数器的实现难题，提供了一个可复用、可维护且高性能的解决方案。

以上就是实现页面多处独立库存计数器：使用Web Components的解决方案的详细内容，更多请关注其它相关文章！


# 多处  # 整站网站优化要多少钱  # 邹城市搬家网站优化  # 哪个推广网站好用一点的  # 菏泽模板网站推广  # 安庆推广网站获客渠道  # 犀牛游戏网站建设  # 潍城关键词排名优化服务  # 手机网站建设找哪家做好  # 网店营销推广有什么问题  # 天门搜索关键词排名  # 复用  # 第一个  # 放在  # 自己的  # javascript  # 如何使用  # 这是  # 多个  # 倒计时  # 自定义  # 封装性  # 持久化存储  # 作用域  # safari  # edge  # 浏览器  # js  # html  # java 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： J*aScript实现动态背景色下的文本与按钮颜色自适应调整  海棠电脑版入口_通过电脑访问海棠官网阅读  漫蛙漫画网页端入口 漫蛙2官方正版漫画站点  EMS快递官网app_中国邮政速递物流手机客户端  Composer如何处理Git子模块（submodule）依赖_Composer与Git Submodule的对比与选择  Win10怎么制作U盘启动盘 Win10系统安装U盘制作教程【详解】  Golang如何测试channel通信行为_Golang channel通信测试与分析方法  Win11网速慢怎么解决 Win11网络设置优化解除限速  qq游戏免费畅玩入口_qq游戏电脑版快速启动  拼多多赚钱渠道_拼多多收益来源  J*aScript中高效清空DOM列表元素：解决for循环中断与任务管理问题  AO3官方镜像站点汇总 AO3同人作品网页版直达链接  LINUX的perf命令入门_LINUX官方性能分析工具的使用与解读  excel怎么制作工资条 excel快速生成工资条的方法  Mac怎么锁定备忘录_Mac备忘录加密设置教程  J*aScript中高效管理与清空动态列表：避免循环陷阱  一加手机电池耗电快怎么办_一加手机电池耗电快的解决方法  使用 Pandas 高效处理 .dat 文件：字符清理与数据计算  不同用户不同价格！ 索尼开启账户个性化定价测试  Fabric模组开发：自定义物品与物品组的现代管理方法  DLsite中文平台入口 DLsite官网内容在线查看  淘宝网网页版登录入口 淘宝官方网页版快捷登录  CSS布局中意外空白：解决padding-top导致的顶部间距问题  TikTok评论显示延迟如何处理 TikTok评论刷新优化方法  深入理解J*aScript中的B样条曲线与节点向量生成  哔哩哔哩忘记密码了怎么找回_哔哩哔哩密码找回方法  PDF怎么合并PDF并保持格式_PDF合并文件保持排版教程  如何在J*a中实现统一对象行为接口_项目大型化时的接口规范化  一加Ace 6T支持全新明眸护眼：通过了最严苛的护眼小金标认证  Python自定义类排序：解决lambda键值访问TypeError的实践指南  如何设置Windows Defender的定时扫描_计划任务实现自动杀毒【安全】  《GTA6》开发画面疑似泄露！这次可不是AI了  uc手机浏览器网页版入口 uc浏览器手机版便捷登录首页  Mac怎么查看崩溃日志_Mac控制台错误报告分析  163邮箱网页版入口导航平台 163邮箱网页版登录入口官网导航  sublime如何优雅地处理行尾空格_sublime自动清理多余空白字符配置  痛风发作了怎么办？ 快速止痛和后期饮食调理  初次安装JDK时环境变量如何正确配置_J*A_HOME与PATH设置规则讲解  Descript怎样用AI剪辑自动去噪_Descript用AI剪辑自动去噪【自动降噪】  Win11怎么关闭触摸屏_Windows 11禁用HID符合标准触摸屏  ArchiveofOurOwn小说阅读-ArchiveofOurOwn同人作品访问链接  Composer的 "licenses" 命令如何帮助你遵守开源协议_检查项目依赖的许可证合规性  红果短剧网页版官网入口 官方最新网址发布  CSS Grid如何控制元素对齐_align-items与justify-items组合使用  css子元素高度不一致导致布局错位怎么办_使用align-items:stretch解决高度差异  zookeeper 都有哪些功能？  Lar*el的路由模型绑定怎么用_Lar*el Route Model Binding简化控制器逻辑  C#中解析不规范的HTML为XML 常见的坑与解决办法  Yandex官网免登录入口_俄罗斯Yandex搜索引擎一键访问  期待已久：小米17 Ultra、小米首款NAS本月登场 

上一篇：使用 URLSearchParams 实现动态生成内容的分享链接
下一篇：css sticky与absolute结合使用有哪些技巧

搜索