你如何与 dart 中的 js 交互？答案

【问题标题】：How do you interact with js from dart?你如何与 dart 中的 js 交互？
【发布时间】：2013-12-15 01:08:28
【问题描述】：

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

看似相同的包似乎可以做到这一点，但使用不同的 api。

为什么有两个？

我们应该使用哪一个？

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

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

进入：

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？那是你应该使用的吗？

编辑：顺便说一句，对于任何偶然发现这一点的人，还有一个开放的错误http://code.google.com/p/dart/issues/detail?id=15795&thanks=15795&ts=1388068177 关于缩小的 dart-js 互操作桥操作目前如何不起作用。最初的问题是在 2013 年 5 月报告的，此后一直没有采取任何行动，所以不要屏住呼吸。

【问题讨论】：

你得到的最后一个错误似乎证明你忘记在你的html页面中添加<script src="pixi.js"></script>。
不。它没有。事实上， js.context['PIXI']['Stage'] 工作正常，文档完全错了。
好吧，你只是混淆了dart:js和package:js的API。
@AlexandreArdhuin 看，如果你没有任何有用的贡献，你可以什么也不说。真的很好，我不介意。 dart-lang.github.io/js-interop/docs/js.html 这里的文档清楚地显示了使用 blah.blah.blah 语法，这是行不通的。如果您对任何其他问题有一些有意义的补充，例如：为什么有两种方法可以做到这一点？我们应该使用哪一个？无论如何我都欢迎它，但你现在只是无济于事。

标签： dart dart-js-interop

【解决方案1】：

Js 互操作以 package:js 开头。它是用window.postMessage 构建的。

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

删除范围和生命周期手动处理
避免使用 noSuchMethod 以尽可能减小编译大小
重命名对象以使 api 更易于理解

一旦 dart:js 准备就绪，package:js 已被重写为在封面下使用 dart:js。

package:js 提供了一个更简单的 Api，但代价是增加了 js 的大小（因为 package:js 使用了 dart:mirrors em> 和 noSuchMethod)。

package:js 和 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']);
}

【讨论】：