使用Dart JS互操作与ES6类

Question

JavaScript：

class MyClass {

    constructor() {
        console.log("MyClass instance created");
        this.answer = 42;
    }
}

let example = new MyClass();
console.log(example.answer);

Dart:

@JS()
library interop_test;

import 'package:js/js.dart';

@JS()
class MyClass {
  external int get answer;
  external set answer(int value);
}

创建一个interop类MyClass的实例：

MyClass myClass = MyClass();

结果是:

异常：TypeError：dart.global.MyClass不是构造函数

我还尝试在@JS()注释的类中添加external MyClass();和external factory MyClass();，但收到相同的消息。如果我将@anonymous注释添加到交互操作类中，则异常消失，但我无法访问实例成员。（但我不知道为什么需要匿名注释）

我正在使用 dart 2.0.0 ， angular 5.0.0 ， js 0.6.1+1 和通过 webdev 使用 dartdevc 。

- András Szepesházi

Answer 1

通常情况下，JS互操作会依赖于函数提升来确保旧式JS类在作用域内。然而，ES6类没有被提升，并且在Dart期望它们存在的地方不可用。有几种不同的方法可以使类在Dart中可用：

将类对象放置在window上

这将把类放置在与函数定义提升到的相同作用域中。在JavaScript中：

class MyClass { ... }

window.MyClass = MyClass;

创建模块对象

你也可以将类放置在一种伪模块或名称空间中。在 JavaScript 中：

class MyClass { ... }
var myModule = { MyClass: MyClass };

接着在Dart中，可以通过myModule.myClass访问该模块：

@JS('myModule.myClass')
class MyClass { ... }

- Jonah Williams

---

两个建议都非常好用！太棒了。谢谢。 - András Szepesházi

如果我理解正确的话，这意味着需要手动编辑js库。如果你是在脚本标签中导入它，那么就需要本地副本。是否有其他不需要这样做的方式？ - Standaa - Remember Monica

我在脚本文件中加入了 window.Myclass = Myclass，但是出现了错误 "dart.global.Myclass 不是构造函数"。 - Pooja Aggarwal