如何与 dart 中的 js 交互？

不，这与同名的其他问题不同。

有一些看似相同的包可以做到这一点，但具有不同的 api。

• http://dart-lang.github.io/js-interop/docs/js.html
• https://api.dartlang.org/docs/channels/stable/latest/dart_js.html

为什么有两个？

我们应该使用哪一个？

互操作看起来较新，并且有更好的 api，但实际上不起作用。根据文档，您应该能够转换此 javascript：

var stage = new PIXI.Stage(0xFFFFFF);;
renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

Into:

var pixi = new js.Proxy(js.context.PIXI.Stage, 0xffffff);
var renderer = js.context.PIXI.autoDetectRenderer(400, 400);
document.body.append(renderer.view);

但是当你尝试编译它时会出现错误：

dart2js
Error occured:/Users/doug/megac/client/public/dart/index.dart:7:27:
Warning: No member named 'PIXI' in class 'Proxy'.
var pixi = new js.Proxy(js.context.PIXI.Stage, 0xffffff);
^^^^^^^^^^^^^^^

那么... js:dart？那是你应该使用的吗？

编辑：顺便说一句，对于任何偶然发现这个问题的人来说，还有一个未解决的错误关于缩小的 dart-js 互操作桥接操作目前无法工作的问题。最初的问题是在 2013 年 5 月报告的，从那时起就没有采取任何行动，所以不要屏住呼吸。

Js 互操作始于包：js。它是用窗口.postMessage.

Later dart:js已添加以提供更好的性能并减少编译后的 js 文件的大小。基本上目标是：

• 删除范围和生命周期手动处理
• 避免使用 noSuchMethod 来保持尽可能低的编译大小
• 重命名对象以使 api 更容易理解

Once dart:js已经准备好了，包：js已重写使用dart:js在盖子下。

包：js提供了更简单的 Api，但代价是增加了 js 大小（因为包：js uses 飞镖:镜子 and 没有这样的方法).

这是同样的事情包：js and dart:js :

import 'package:js/js.dart' as js;

main() {
  var pixi = new js.Proxy(js.context.PIXI.Stage, 0xffffff);
  var renderer = js.context.PIXI.autoDetectRenderer(400, 400);
  document.body.append(renderer.view);
}

import 'dart:js' as js;

main() {
  var pixi = new js.JsObject(js.context['PIXI']['Stage'], [0xffffff]);
  var renderer = js.context['PIXI'].callMethod('autoDetectRenderer', [400, 400]);
  document.body.append(renderer['view']);
}