SuperAPI AI 工具集

jaspr-js-interop

通用与其它

查看项目

更新于 10-16 02:32

技能介绍

该技能用于在构建 Jaspr Web 应用时与 JavaScript 有效集成,适用于包装已有 JS 库、访问浏览器原生 API 等场景。Dart 通过现代 js_interop 访问 JavaScript;由于 Jaspr 应用可编译为 JavaScript 或 WebAssembly,与原始 JS 变量、函数或库交互时必须使用 Dart 的显式 js_interop 机制。

导入策略:在 server 或 static 模式下,必须始终导入 package:universal_web/js_interop.dart,它在服务端处理时作为安全占位而不破坏编译。同一模式下,必须将任何 JS Interop 执行包裹在 if (kIsWeb) { ... } 块中,避免预渲染时在服务端抛异常。在 client 模式下可直接导入 dart:js_interop。对于标准浏览器 API(如 window.innerHeight、document、DOM 节点),应使用 package:universal_web/web.dart(client 模式下用 package:web/web.dart),而非手动创建 js_interop 包装。

用法示例:绑定全局 JS 函数或对象用 @JS(),Dart String 需用 .toJS 转换。包装第三方 JS 库时,用扩展类型包装 JSObject,如 Analytics 示例映射 trackPage、getVisitCount;通过 @JS('Analytics') 获取对象,用 .toDart、.toDartInt 等将 JS 原始值转回 Dart 类型。需要传入或接收普通 JS 对象字面量时,定义带 @JS() 与 @anonymous 的扩展类型,如 ChartConfig,可创建匿名对象并读取属性。

限制与注意:文中未提供安装命令、收费或平台支持信息,暂未提供。