使用来自 dart 语言的第三方库答案

【问题标题】：Using thirdparty libraries from dart language使用来自 dart 语言的第三方库
【发布时间】：2014-05-17 09:26:49
【问题描述】：

如何在 dart.. 中导入和使用任何第三方 javascript 库？我想在我的飞镖应用程序中使用snapsvg 来渲染 svg。但不知道如何添加依赖来添加和导入它。

我将js: any 添加到我的pubspec.yaml 并将packages/browser/interop.js 导入我的html。我在哪里放置下载的 snapsvg.js 并将其导入到我的 dart 源文件中以使用它。

我正在尝试使用来自 dart 的 snapsvg 框架来使用以下 javascript 代码。

s = Snap(800, 600);
s.rect(0, 0, 100, 100).attr({
    fill: 'white',
    stroke: 'black'
});

我在 dart 中尝试了这段代码：

  import 'package:js/js.dart' as js;
  void main() {
      var s = js.context.Snap(800, 600);
      s.rect(0, 0, 100, 100);
  }

这在 dartium 中运行良好，但是当我在构建后作为 Javascript 运行时，出现 javascript 错误“在对象中找不到方法 zm”

我认为这不是正确的方法，我应该在代理上使用 callMethod。所以我改变了这样的代码

import 'dart:js' show context, JsObject;
void main() {
     var snap = context['Snap'];
    snap.callMethod('rect', 0,0,100,100);
}

这在 Dartium 中不起作用。如果有人可以在我的示例代码中提供如何从 dart 调用构造函数 Snap(800, 600) 以及 rect 和 attr 方法的示例，我将不胜感激。

【问题讨论】：

【解决方案1】：

您可以使用 <script> 标记将它们添加到 HTML 文件中。
你可以使用 dart-js-interop 从 Dart 调用 JavaScript 函数。在此标签下的 Stackoverflow 上有很多示例 - 只需单击您问题下方的标签即可。如果您提供更具体的示例，则更容易提供帮助。

【讨论】：

【解决方案2】：

您可以使用内置的 dart:js 库调用 JavaScript。请尽量避免使用 /package/ js，这是通过将 js: any 添加到您的 pubspec 来安装的。 js 包可能会导致 dart2js 输出臃肿，我们可能会在某个时候弃用它。

您可以像在任何 HTML 页面中一样通过脚本标签引用 JavaScript 文件。您实际上并没有将它们导入 Dart 源代码，而是使用 dart:js 通过其顶级 context 属性访问 JavaScript。

【讨论】：