介绍 new-js-clock

open-sourcejavascripttypescriptrelease

15 年多前，我发布了一个名为 JS-Clock 的小型 jQuery 插件。那是一个简单的小工具，能够在 DOM 元素内渲染一个滴答作响的时钟——实用、简洁，完全是那个年代的产物。它依赖于 jQuery，在多实例支持方面存在一些问题，自首次发布后也从未经历过任何有意义的更新。

今天，这一切改变了。我正式发布 new-js-clock 1.0.0——一个从零开始以 TypeScript 重写的版本，在保留原版精神的同时，将每一项局限都甩在了身后。你可以在演示页面上亲眼目睹它的实际效果。

1.0.0 的新功能

此次版本带来的所有更新：

  • 🔒 TypeScript — 整个代码库均具备完整的类型安全，配备全面的接口定义。
  • 🌐 E2E + 单元测试套件 — 确定性的 Jest 覆盖率，加上在真实浏览器中运行的 Selenium E2E 测试，包含后台标签页行为的扩展验证。
  • 📦 零依赖 — 纯粹的 vanilla JavaScript，无需 jQuery。
  • 🐛 错误修复 — 多实例支持现已正常运作，这是 0.8 版本的主要问题所在。
  • ⚡ 现代 API — 干净直观的 API，每个创建的时钟都拥有完整的实例方法。
  • 🧪 完整测试 — 162 个确定性 Jest 测试，行覆盖率 99.74%、语句覆盖率 99.02%、函数覆盖率 100%、分支覆盖率 98.32%。
  • 🐳 Dockerized E2E 网格 — Selenium Grid 可在本地及 CI 环境中通过 pnpm run e2e:docker 运行无头 Chrome、Firefox 及 Edge。
  • 📱 ES 模块 — 支持 tree-shaking 的 ES Module 导入，同时提供 CommonJS 及 IIFE 打包版本。
  • 🌍 支持夏令时的时区 — 采用 IANA 时区，自动处理夏令时切换。
  • ⏱️ 秒表模式 — 全新秒表功能，从 00:00:00 开始向上计时。
  • 🏁 圈数及分段时间 — 在秒表模式下记录圈数时间（delta）及累计时间（split）。
  • 📊 最佳／最差圈数 — 内置辅助函数，轻松找出单次计时中最快及最慢的圈数。
  • 🎯 高精度计时 — 通过 performance.now() 测量圈数差值，精度达毫秒以下。

安装方式

npm install new-js-clock
# 或者
pnpm add new-js-clock

也可通过 CDN 直接在浏览器中使用——请参阅 README 以获取 unpkg 及 jsDelivr 的链接。

为何花了这么长时间？

说实话？是人生。原版 JS-Clock 是应我已故好友 Gustavo Beltrão（那个年代的 PHP 高手，我有幸与他合作过不止一次）的请求而写的，用于企业内部仪表板以及面向来自不同时区访客的单页活动网站。它的表现足够称职，让我从未觉得有迫切需要重新审视它。但 jQuery 早已在现代项目中销声匿迹，TypeScript 成为了库开发的标准，而多实例支持的错误也一直让我如鲠在喉。当我终于下定决心好好修复它时，就觉得应该做得彻底——加入类型、测试、现代模块系统，以及足够的功能让它在 2026 年真正派上用场。我也打算在下一个商业项目中使用它。

亡羊补牢，为时未晚。

愿荣耀单单归于耶稣基督！