如何在Dart中使用JavaScript库

Question

我是一名学习中的package:js和Dart文件的IT技术人员。这个Dart文件是chart.js的Dart封装。我认为这个文件是连接Dart和JavaScript的桥梁。所以，在这个文件中，它必须说明这个Dart文件要连接哪个JavaScript库。我的理解正确吗？但是我没有找到相关信息。以下语句的意思是什么？以下两个语句是否说明了这个Dart文件要连接哪个JavaScript库？

@JS('Chart')
library chart.js;

我不知道如何将https://github.com/google/chartjs.dart/blob/master/lib/chartjs.dart中的函数映射到https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js中的函数。 有人能提供更多教程吗？

- BAE

Answer 1

您不需要映射到JavaScript文件，只需要映射到JS对象和函数。

您需要在index.html中添加一个脚本标签，以加载您想要映射的JavaScript文件，这将使其在全局范围内可用。

然后您需要进行如下映射：

• 将Dart函数映射到JavaScript函数，这样当您调用此类Dart函数时，调用实际上会被转发到JavaScript函数。

• 映射Dart类，以便您可以使用强类型Dart类，这些类在您将它们作为参数传递给映射函数或从此类函数调用中获取它们作为返回值时将被转换为JavaScript对象。

@JS('Chart')
library chart.js;

chart.js 是一个库的名称，它在 library 后面是任意的。 library 指令只需要一个唯一的名字。

@JS('Chart') 的意思是已经加载的 chart.js 库现在在 JavaScript 中可以使用 window.Chart 来访问（window 在 JS 中代表全局对象并且是隐式的）。

@JS()
class Chart {

声明了一个Dart类Chart，并使用@JS()将其映射到在上面声明的库作用域中具有相同名称的JS类。因此，Dart类Chart将映射到JavaScript类window.Chart.Chart。

external factory Chart(

在Dart的Chart类中，external ...声明将映射到同名的JS方法。

更多详细信息可以在README.md中找到：https://pub.dartlang.org/packages/js。

如果仍然困惑，可以提出更具体的问题。关于如何使用包的通用问题很难回答。

- Günter Zöchbauer

---

谢谢。我阅读了https://pub.dartlang.org/packages/js，但从README中我没有获得您给我的详细信息。你是怎么学习`package:js`的？ - BAE

从README中和Dart团队成员在这个功能上提供了有价值的输入的讨论中，我也关注了他们在开发这个功能时的讨论，并使用了前身dart:js。这有助于形成一个良好的整体印象，但我从未在实际项目中真正使用过这些东西。 - Günter Zöchbauer

谢谢。我非常感激。就个人而言，这份文档太过简陋，而且“package:js”使用起来非常困难。在真实世界中使用它太过冒险。 - BAE

文档有点简陋，我同意，但我并没有觉得太难。当然，如果你是Dart的新手，或者也不懂JS知识，一次性接受可能有些吃力。在过去两年中，整个Dart生态系统发生了很多重大变化，需要一些时间才能更新所有内容、改进文档等等。目前只有Dart 2拥有最高优先级，因为Flutter依赖它，并且他们最终会发布1.0版本，但同时也必须发行Dart 2。Flutter是Dart成为大型玩家的杀手级应用程序，所以优先级相当集中。 - Günter Zöchbauer

您可以使用Web视图来加载JavaScript，但目前我没有找到任何合适的解决方案将JS文件导入到Dart中并运行： 这是一个链接，其中使用了JS文件(https://github.com/fluttercommunity/flutter_webview_plugin/blob/master/example/lib/main.dart)。 - Kashif Ahmed

哥们，你的回答应该被添加到文档中，并且应该进一步扩展，这个答案只是教程的开端！package:js 的开发者没有写任何有用的东西！我在 README 中卡在了那个 library 行。 - Hamza Abbad