SuperAPI AI 工具集

bootstrap-component-js

通用与其它

查看项目

更新于 10-15 23:58

技能介绍

用途:为 Bootstrap 6 组件添加 JavaScript 行为,编写其 TypeScript 源码。每个 Bootstrap 插件都是 js/src/ 下继承 BaseComponent 的 TypeScript 模块,基类负责实例注册、配置合并与销毁,组件自动获得 getInstance()、getOrCreateInstance()、data-bs-* 配置、命名空间事件和 dispose()。源码为 TypeScript,编译为 JavaScript 并自带声明文件,使用者无需 @types/bootstrap。

主要能力与流程:1) 脚手架模块,参考最小的 alert.ts,保留 Constants、Class definition、Data API implementation 分区与成员分组;NAME 是唯一必需静态属性,基类据此派生 DATA_KEY(bs.<name>)与 EVENT_KEY。2) 定义配置:声明 Config 类型、Default、DefaultType 并暴露为静态属性;合并顺序为 Default → data-bs-config → 单个 data-bs-* → 构造函数对象,DefaultType 逐键校验,不匹配抛 TypeError,可用 _configAfterMerge 归一化。3) 实现行为与事件:事件成对出现,动作前可取消事件需检查 defaultPrevented;用 _queueCallback 处理过渡;用 SelectorEngine、Manipulator、EventHandler 操作 DOM 与监听。4) 数据 API 作为模块底部副作用,从 document 委托并加 .data-api 命名空间,可用 enableDismissTrigger、eventActionOnPlugin 等共享辅助函数。5) 可选:用 @floating-ui/dom 定位,需在 super() 前守卫,并保存清理函数。6) 可选:封装第三方库,保持 Bootstrap 配置面,转译回调为命名空间事件,在 dispose() 中调用其销毁。7) dispose() 中先清理定时器、观察器、document/window 监听、Floating UI 与第三方实例,再调用 super.dispose()。8) 在 js/src/index.ts 导出,补充类型测试与单元测试,覆盖率阈值 90% 语句/函数/行、88% 分支。9) 用 npm run js-lint、js-typecheck、js-test-unit、js 等命令验证。

限制:仓库风格为仅 ES 模块、无分号、2 空格缩进、单引号,覆盖成员需 override;相对导入保留 .js 扩展名;verbatimModuleSyntax 要求类型导入标注,erasableSyntaxOnly 禁用 enum、namespace 与构造函数参数属性;实例状态用 protected declare 声明。导入组件模块会执行其数据 API 副作用,库中需注意;NAME 不可与现有插件冲突。资料未提供具体收费、价格与平台信息。