用途:该技能面向 Stimulus 这一轻量 JavaScript 框架,帮助开发者从零构建控制器并推进到生产环境,覆盖创建、调试、测试、优化以及与 Turbo 集成等完整生命周期。
主要能力:围绕 Stimulus 的核心机制展开,包括 targets、values、actions、outlets、classes 等 API;提供 UI 模式实现(如模态框、下拉菜单、标签页)、表单处理、性能优化与反模式审查等能力。
核心原则:Stimulus 通过 data 属性把 JavaScript 行为连接到 HTML,不负责渲染 HTML,而是增强既有 HTML 的交互性。状态存放在 DOM 而非 JavaScript 中,控制器可在页面切换间被丢弃并从缓存 HTML 重新初始化。命名遵循约定:控制器 data-controller="clipboard",目标 data-clipboard-target="source",动作 data-action="click->clipboard#copy",值 data-clipboard-url-value="/api/copy",类 data-clipboard-supported-class="visible",出口 data-clipboard-result-outlet="#result"。生命周期回调包括 initialize()、connect()、disconnect(),需在 disconnect() 中清理 connect() 里设置的定时器、事件监听器和观察者。每个控制器只能看到自身作用域内的元素,跨控制器通信用 outlets。应优先构建无 JavaScript 也能工作的 HTML,再渐进增强。
使用方式:技能内含参考文档(architecture.md、targets.md、values.md、actions.md、outlets.md、classes.md、stimulus-use.md、ui-patterns.md、turbo-integration.md、testing-debugging.md、performance.md、anti-patterns.md)与工作流(build-new-controller.md、debug-controller.md、add-feature.md、review-controller.md、optimize-performance.md、implement-ui-pattern.md、integrate-turbo.md、handle-forms.md)。调试时可设置 application.debug = true。
适用场景:新建或调试控制器、添加功能、审查最佳实践、性能优化、实现常见 UI 模式、与 Turbo Frames/Streams 集成、处理表单等。
限制:资料未提供具体收费、价格、平台支持范围及效果数据,暂未提供。