你如何与飞镖的js互动？

Question

不,这与同名的其他问题不同.

有看似相同的包似乎这样做,但有不同的apis.

• 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);

成:

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月报道的,从那时起就没有采取任何行动,所以不要屏住呼吸.

Answer 1

Js interop以package开头:js.它是用window.postMessage构建的.

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

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

一旦dart:js已经准备好,包:js已被重写为使用dart:js封面.

package:js提供了一个更简单的Api,它的代价是增加了js的大小(因为package:js使用了dart:mirrors和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']);
}