如何模拟 JavaScript 互操作对象
在本教程中,您将学习如何模拟 JS 对象,以便您可以测试互操作实例成员,而无需使用真实的实现。
背景和动机
#在 Dart 中模拟类通常通过重写实例成员来完成。但是,由于扩展类型用于声明互操作类型,因此所有扩展类型成员都是静态调度的,因此无法使用重写。这个限制对于扩展成员也适用,因此实例扩展类型或扩展成员无法被模拟。
虽然这适用于任何非 external
扩展类型成员,但 external
互操作成员是特殊的,因为它们会在 JS 值上调用成员。
extension type Date(JSObject _) implements JSObject {
external int getDay();
}
正如在用法部分讨论的那样,调用 getDay()
将导致在 JS 对象上调用 getDay()
。因此,通过使用不同的 JSObject
,可以调用 getDay
的不同实现。
为了做到这一点,应该有一些机制来创建一个具有属性 getDay
的 JS 对象,当调用该属性时,会调用一个 Dart 函数。一个简单的方法是创建一个 JS 对象并将属性 getDay
设置为转换后的回调,例如:
final date = Date(JSObject());
date['getDay'] = (() => 0).toJS;
虽然这可行,但这很容易出错,并且当您使用许多互操作成员时,它不能很好地扩展。它也不能正确处理 getter 或 setter。相反,您应该结合使用createJSInteropWrapper
和 @JSExport
来声明一个类型,该类型为所有 external
实例成员提供实现。
模拟示例
#import 'dart:js_interop';
import 'package:expect/minitest.dart';
// The Dart class must have `@JSExport` on it or at least one of its instance
// members.
@JSExport()
class FakeCounter {
int value = 0;
@JSExport('increment')
void renamedIncrement() {
value++;
}
void decrement() {
value--;
}
}
extension type Counter(JSObject _) implements JSObject {
external int value;
external void increment();
void decrement() {
value -= 2;
}
}
void main() {
var fakeCounter = FakeCounter();
// Returns a JS object whose properties call the relevant instance members in
// `fakeCounter`.
var counter = createJSInteropWrapper<FakeCounter>(fakeCounter) as Counter;
// Calls `FakeCounter.value`.
expect(counter.value, 0);
// `FakeCounter.renamedIncrement` is renamed to `increment`, so it gets
// called.
counter.increment();
expect(counter.value, 1);
expect(fakeCounter.value, 1);
// Changes in the fake affect the wrapper and vice-versa.
fakeCounter.value = 0;
expect(counter.value, 0);
counter.decrement();
// Because `Counter.decrement` is non-`external`, we never called
// `FakeCounter.decrement`.
expect(counter.value, -2);
}
@JSExport
允许您声明一个可以在 createJSInteropWrapper
中使用的类。createJSInteropWrapper
将创建一个对象字面量,该字面量将类的每个实例成员名称(或重命名)映射到一个 JS 回调,该回调是使用 Function.toJS
创建的。当被调用时,JS 回调反过来会调用实例成员。在上面的例子中,获取和设置 counter.value
会获取和设置 fakeCounter.value
。
您可以通过从类中省略注解,而仅注解特定成员,来指定仅导出类的某些成员。您可以在 @JSExport
的文档中查看关于更专业的导出(包括继承)的更多细节。
请注意,这种机制并非仅限于测试。您可以使用它为任意 Dart 对象提供 JS 接口,从而允许您将 Dart 对象导出到具有预定义接口的 JS。
除非另有说明,否则本网站上的文档反映的是 Dart 3.7.1 版本。页面上次更新于 2025-01-07。 查看源代码 或 报告问题。