Dart-JavaScript Interop 使用与技术文档

2024-12-29 12:38:51作者：蔡丛锟

本文档旨在帮助用户安装、使用和理解 Dart-JavaScript Interop 项目。以下是关于如何安装、使用项目以及项目 API 的详细指南。

1. 安装指南

添加依赖

由于版本 0.4.0 尚未发布到 pub.dartlang.org，因此需要使用 Git 依赖来安装。

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  js:
    git:
      url: git://github.com/dart-lang/js-interop.git

配置转换器

package:js 需要安装两个转换器，一个用于直接使用 package:js 生成 JavaScript 代理类的实现，另一个用于生成入口点所需的设置代码。

如果您的包直接使用 package:js 导出 API 或定义 JavaScript 代理，请在您的 pubspec.yaml 中添加以下内容：

transformers:
- js

如果您的包定义了 web/ 中的入口点，请在您的 pubspec.yaml 中添加以下内容：

transformers:
- js/initializer

如果您的包既定义了代理或导出，又具有 web/ 中的 HTML 入口点，则添加以下两个转换器：

transformers:
- js
- js/initializer

加载生成的 JavaScript

导出的 API 的 JavaScript 原型必须在页面中加载，以便其他 JavaScript 代码可以使用它们。这通过在 HTML 中包含 packages/js/interop.js 脚本来实现。构建应用程序时，该脚本被替换为生成的 JavaScript。interop 脚本必须在主 Dart 脚本之前加载。

<html>
  <head>
    <script src="packages/js/interop.js"></script>
  </head>
  <body>
    <script type="application/dart" src="main.dart"></script>
  </body>
</html>

初始化 Interop

您的 main() 方法必须调用 initializeJavaScript() 以导出 Dart 类并注册代理。此调用应尽早进行，最好是在最开始。

library main;

import 'package:js/js.dart';

main() {
  initializeJavaScript();
}

2. 项目使用说明

定义类型化 JavaScript 代理

类型化 JavaScript 代理是表示 JavaScript 对象的类，并具有定义良好的 Dart API，包括类型注解、构造函数，甚至可选和命名参数。它们分为两部分定义：

定义接口的抽象类
实现接口的的具体类（通过镜子或 js 转换器自动实现）

抽象类的定义如下：

必须扩展 JsInterface
必须具有构造函数签名 C.created(JsObject o)
抽象方法或访问器自动为您调用 JavaScript
理想情况下，所有参数和返回值都应具有类型注解
如果要从 Dart 创建新实例，请添加工厂构造函数
对于 Map 和 List，需要复制才能在 JavaScript 中使用，对任何接收 Map 或 List 的参数添加 @jsify 注解

具体实现类的定义如下：

必须扩展接口类
必须具有 created 构造函数
必须具有 @JsProxy 注解
应具有 noSuchMethod 方法以转发到超类，以抑制警告

导出 Dart API 到 JavaScript

您可以使用 @Export 注解将类、函数、变量甚至整个库导出到 JavaScript。

导出类的示例：

library a;

import 'package:js/js.dart';

@Export()
class A {
  String name;

  A();

  A.withName(this.name);
}

在 JavaScript 中使用：

var a1 = new dart.a.A();
a1 instanceof dart.a.A; // true
a1.name; // null
a1.name = 'red'; // 在 Dart 中设置值

// 支持命名构造函数
var a2 = new dart.a.A.withName('blue');
a2 instanceof dart.a.A;
a2.name; // 'blue'

所有由导出的函数和方法引用的类型必须是 dart:js 定义的 "原始" 类型 (bool, num, String, DateTime)、JsInterfaces 或其他导出的类。

3. 项目 API 使用文档

请参考项目提供的示例和接口定义，以了解如何使用 Dart-JavaScript Interop API。具体的使用方法和接口细节可以根据项目文档和源码中的注释进行深入了解。

4. 项目安装方式

请遵循上述 "安装指南" 部分的步骤进行安装。确保正确配置 pubspec.yaml 文件，并加载所需的 JavaScript 脚本。

登录后查看全文

Dart-JavaScript Interop 使用与技术文档

1. 安装指南

添加依赖

配置转换器

加载生成的 JavaScript

初始化 Interop

2. 项目使用说明

定义类型化 JavaScript 代理

导出 Dart API 到 JavaScript

3. 项目 API 使用文档

4. 项目安装方式

热门内容推荐

最新内容推荐

项目优选

Dart-JavaScript Interop 使用与技术文档

1. 安装指南

添加依赖

配置转换器

加载生成的 JavaScript

初始化 Interop

2. 项目使用说明

定义类型化 JavaScript 代理

导出 Dart API 到 JavaScript

3. 项目 API 使用文档

4. 项目安装方式

相关内容推荐

热门内容推荐

最新内容推荐

项目优选