UD5工具箱
使用教程
第一步：了解Web Locks API基础
Web Locks API通过navigator.locks对象提供锁管理功能。核心方法是navigator.locks.request(name, options, callback)，其中name是锁的名称（字符串），options指定锁的模式和行为，callback是获取锁后执行的回调函数。锁的名称是全局的，同一名称的锁在所有标签页、iframe和Worker中共享。通过navigator.locks.query()可以查询当前的锁状态。
第二步：获取独占锁
在工具界面的锁名称输入框中输入一个名称（如"my-lock"），选择"独占锁"模式，点击"获取锁"按钮。工具会调用navigator.locks.request(name, {mode: 'exclusive'}, callback)来获取锁。如果锁当前空闲，会立即获取成功并在日志中显示绿色成功标记。此时在另一个标签页中打开本工具，尝试获取同一名称的锁，你会发现请求被阻塞，直到第一个标签页释放锁。
第三步：体验共享锁
将锁模式切换为"共享锁"，在第一个标签页中获取锁成功后，切换到第二个标签页，同样选择"共享锁"模式获取同一名称的锁。你会发现两个标签页都可以同时持有共享锁。但如果你在第三个标签页中尝试获取"独占锁"，则会被阻塞，因为共享锁和独占锁互斥。这种模式非常适合读多写少的场景。
第四步：测试ifAvailable模式
先在一个标签页中持有锁，然后在另一个标签页中勾选"ifAvailable"选项后获取同一锁。由于锁已被占用，工具会立即返回false并在日志中显示获取失败。取消勾选后再次获取，请求会被阻塞等待。通过对比两种模式的行为差异，理解ifAvailable在非阻塞场景中的实用价值。
第五步：使用AbortSignal设置超时
在高级选项中设置超时时间（如5000毫秒），然后获取一个已被其他标签页持有的锁。工具会创建AbortController并在指定时间后调用abort()。你可以看到锁请求在超时后被取消，抛出AbortError，日志中显示超时失败记录。超时机制可以有效防止锁请求无限期等待。
第六步：尝试steal选项
在一个标签页中持有锁，在另一个标签页中勾选"steal"选项后获取同一锁。持有锁的标签页会收到AbortError，锁被强制转移。观察两个标签页的日志变化：第一个标签页的锁回调被中断，第二个标签页成功获取锁。注意，仅在必要时使用此功能，因为它可能导致数据不一致。
第七步：使用预设场景
点击"预设场景"下拉菜单，选择一个场景（如"并发支付防护"）自动加载场景配置。每个预设都包含了锁名称、模式、选项和操作序列的完整配置。加载后点击"运行预设"按钮，工具会自动执行一系列锁操作，模拟真实应用中的锁使用模式。观察日志中操作的时序关系，理解锁在实际场景中的作用。
第八步：跨标签页协作测试
打开两个或更多标签页，在标签页A中持有锁，在标签页B的锁状态监控面板中查看锁的状态。标签页B会通过BroadcastChannel实时接收标签页A的锁操作通知。你可以观察到锁的获取、持有、释放在跨标签页间的同步效果。这对于调试多标签页应用的锁逻辑非常有帮助。