首页
/ Dart-JavaScript Interop 使用与技术文档

Dart-JavaScript Interop 使用与技术文档

2024-12-29 08:16:26作者:蔡丛锟

本文档旨在帮助用户安装、使用和理解 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,包括类型注解、构造函数,甚至可选和命名参数。它们分为两部分定义:

  1. 定义接口的抽象类
  2. 实现接口的的具体类(通过镜子或 js 转换器自动实现)

抽象类的定义如下:

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

具体实现类的定义如下:

  1. 必须扩展接口类
  2. 必须具有 created 构造函数
  3. 必须具有 @JsProxy 注解
  4. 应具有 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 脚本。

登录后查看全文
热门项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
22
6
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
165
2.05 K
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
8
0
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
60
16
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
952
561
apintoapinto
基于golang开发的网关。具有各种插件,可以自行扩展,即插即用。此外,它可以快速帮助企业管理API服务,提高API服务的稳定性和安全性。
Go
22
0
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
1.01 K
396
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
407
387
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
199
279
giteagitea
喝着茶写代码!最易用的自托管一站式代码托管平台,包含Git托管,代码审查,团队协作,软件包和CI/CD。
Go
17
0