如何试用最新的JS互操作？ https://github.com/dart-lang/js-interop

Question

I'm looking to try out the "next gen" Dart JS interop with the goal of being able to export Dart libraries for use from JS. 我希望尝试“下一代” Dart JS互操作，其目标是能够从JS导出Dart库以供使用。 It doesn't seem to work for me though. 不过，这似乎对我不起作用。 I followed the README at: 我在以下位置阅读自述文件：

https://github.com/dart-lang/js-interop/blob/master/README.md https://github.com/dart-lang/js-interop/blob/master/README.md

I created a new project, set the dependency to this github repo, added an A class just like in the readme, and tried to instantiate the A class from javascript using the console. 我创建了一个新项目，将依赖项设置为此github存储库，就像自述文件一样添加了一个A类，并尝试使用控制台从javascript实例化该A类。

When using either default or named constructors in the console I get: 在控制台中使用默认或命名构造函数时，我得到：

var a = new dart.lib.A.withName('word');
TypeError: undefined is not a function
var a = new dart.lib.A();
TypeError: undefined is not a function

Is this rewrite functional yet? 这个重写功能了吗？ Am I doing something wrong? 难道我做错了什么？ Is there a different branch of js-interop I should be using? 我应该使用js-interop的另一个分支吗？

Here's my simple project that follows the readme: 这是我遵循自述文件的简单项目：

## pubspec.yaml

name: lib
description: A sample Dart lib published to JS
dependencies:
  browser:
  js:
    git: git://github.com/dart-lang/js-interop.git
transformers:
- js
- js/initializer

## lib/a.dart

library lib;

import 'package:js/js.dart';

@Export()
class A {
  String name;
  A();
  A.withName(this.name);
}

## web/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
  </head>
  <body>
    <p id="text"></p>
    <script type="application/dart" src="index.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/js/interop.js"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

## web/index.dart

import 'package:lib/a.dart';
import 'package:js/js.dart';

main() {
  initializeJavaScript();
  var a = new A();
}

## Generated index.dart_initialize.js

window.dart = window.dart || {};

window.dart.Object = function DartObject() {
  throw "not allowed";
};

window.dart.Object._wrapDartObject = function(dartObject) {
  var o = Object.create(window.dart.Object.prototype);
  o.__dart_object__ = dartObject;
  return o;
};


// library lib
(function (ns) {
  var lib = ns;
  ["lib"].forEach(function (s) {
    lib = lib[s] = lib[s] || {};
  });

  // class A
  (function(parent) {
    var constructor = parent.A = function _A() {
      this.__dart_object__ = constructor._new();
    };
    constructor.prototype = Object.create(dart.Object.prototype);
    constructor.prototype.constructor = constructor;
    constructor._wrapDartObject = function(dartObject) {
      var o = Object.create(constructor.prototype);
      o.__dart_object__ = dartObject;
      return o;
    };

    constructor.withName = function _withName(name) {
      this.__dart_object__ = constructor._new_withName(name);
    }
    constructor.withName.prototype = constructor.prototype;

  })(lib);
})(window.dart);

Answer 1

I just tried your code and indeed I left something out of the instructions. 我只是尝试了您的代码，实际上我在指令中遗漏了一些东西。 You need to have a call to initializeJavaScript() in your main() method to set up the exports. 您需要调用main()方法中的initializeJavaScript()来设置导出。 Also, the script tag for interop.js needs to be before the Dart script. 另外， interop.js的脚本标签必须在Dart脚本之前。

Once I made those changes I was able to run your code and do this in the JS console: 完成这些更改后，我便可以运行您的代码并在JS控制台中执行此操作：

> var a = new dart.lib.A.withName('word');
< undefined
> a
< _withName {__dart_object__: DartObject, constructor: function}
> a.name
< "word"
> a instanceof dart.lib.A;
< true

Answer 2

It's a work in progress. 这项工作正在进行中。 You have to wait before using it. 您必须等待使用它。

如何试用最新的JS互操作？ https://github.com/dart-lang/js-interop

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-10-08 07:40:01

解决方案2
1 2014-10-06 19:10:47

如何试用最新的JS互操作？ https://github.com/dart-lang/js-interop

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-10-08 07:40:01

解决方案2 1 2014-10-06 19:10:47

解决方案1
3 已采纳 2014-10-08 07:40:01

解决方案2
1 2014-10-06 19:10:47