【问题标题】:how to use javascript library in dart如何在 dart 中使用 javascript 库
【发布时间】:2018-12-10 04:17:18
【问题描述】:

我正在学习 package:jsdart file,这是 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 中的函数。谁能多给点教程?

【问题讨论】:

    标签: javascript dart chart.js dart-js-interop


    【解决方案1】:

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

    您需要向index.html 添加一个脚本标签,以加载您要映射到的JavaScript 文件,这将使其全局可用。

    然后你需要映射

    • Dart 函数到 JavaScript 函数,所以当你调用这样的 Dart 函数时,调用实际上会被转发到 JavaScript 函数。

    • Dart 类,以便您可以使用强类型的 Dart 类,然后当您将它们作为参数传递给映射函数或从此类函数调用中获取它们作为返回值时,这些类将与 JavaScript 对象相互转换。

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

    library 之后的名称 chart.js 是任意的。 library 指令只需要一个唯一的名称。

    @JS('Chart') 表示加载的 chart.js 库在 window.Chart 下的 JavaScript 领域可用(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

    如果您仍然遇到困难,您可以提出更具体的问题。很难回答有关如何使用包的一般性问题。

    【讨论】:

    • 谢谢。我读了pub.dartlang.org/packages/js,但从自述文件中我没有得到你给我的细节。你是怎么学的package:js
    • 来自 README ;p 以及从事此功能的 Dart 团队成员提供了宝贵意见的讨论。我还关注了他们在开发该功能时的讨论,我使用了前任 dart:js。这有助于获得一张好照片,但我从未在实际项目中真正使用过这些东西。
    • 谢谢。对此,我真的非常感激。就个人而言,文档太少了,package:js 太难用了。在现实世界中使用它太冒险了。
    • 文档有点稀疏,我同意,但我并不觉得太难。当然,如果您是 Dart 新手,并且可能也没有良好的 JS 知识,那么一下子就有点多了。在过去的 2 年中,整个 Dart 生态系统发生了如此多的巨大变化,以至于需要一段时间才能更新所有内容并改进文档等等。目前只有 Dart 2 具有最高优先级,因为 Flutter 依赖于它,他们最终会发布 1.0,但 Dart 2 也必须发布。 Flutter 是 Dart 成为大玩家的杀手级应用。因此,优先事项非常集中。
    • 您可以使用 web 视图加载 javascript,但目前,我没有找到任何合适的解决方案将 js 文件导入 dart 并运行:这是使用 js 的文件的链接( github.com/fluttercommunity/flutter_webview_plugin/blob/master/…)
    猜你喜欢
    • 2013-12-28
    • 1970-01-01
    • 1970-01-01
    • 2016-07-28
    • 1970-01-01
    • 2017-11-19
    • 2015-02-03
    • 2014-07-06
    • 1970-01-01
    相关资源
    最近更新 更多