使用jQuery的Dart JavaScript互操作回调函数

Question

我该如何将以下jQuery代码翻译成Dart？我使用js.interop时遇到了警告回调无法正常工作的问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  $(function () {
    $('p').hide('slow', function() {
      alert("The paragraph is now hidden");
    });
  });
</script>

非常感谢您的帮助。

- basheps

Answer 1

感谢您的问题！我自己也不确定，但事实证明这是可能的。 :)

首先，在您的 pubspec.yaml 文件中添加 js：

name:  jquerydart
description:  A sample application

dependencies:
  js: any

然后，通过命令行或Dart编辑器运行pub install。

接着，在你的Dart文件中：

import 'dart:html';
import 'package:js/js.dart' as js;

hideIsDone() {
  window.alert('all done!');
}

void main() {
  js.scoped(() {
    js.context.jQuery('p').hide(1000, new js.Callback.once(() => hideIsDone()));
  });
}

注意，要从JS回调到Dart，您需要创建一个Callback对象。

另外请注意，您不能使用$作为jQuery变量，因为dart2js也使用$。因此，在此期间，您需要在Dart代码中使用jQuery。

话虽如此，通过JS-Dart互操作性使用jQuery很酷，但Dart真的应该为我们做这件事。因此，我打开了一个错误http://code.google.com/p/dart/issues/detail?id=6526。

- Seth Ladd

---

个人而言，我并不喜欢看到人们试图在 Dart 中使用 jQuery（甚至是在 JS 中）。我更想看到对于操作 DOM 有一个良好的基础支持（在 Dart 中已经相当不错了），然后结合一些漂亮的动画库等。你创建的问题在这方面有所帮助。 - Kai Sellgren

我同意，凯。但在这些早期阶段拥有这样的桥梁服务是很好的。 - John Evans

你能用"hideIsDone"替换"() => hideIsDone()"吗？ - Shannon -jj Behrens

@SethLadd。这个解决方案还有效吗？我在“js”包中找不到scoped()和Callback.once。 - Nawaf Alsulami

还有一个js包，但我不确定这个特定的解决方案是否仍然有效。使用更新的dart:js库可能更好。 - Seth Ladd

Answer 2

首先在你的 pubspec.yaml 文件中添加 js 依赖：

dependencies:
  js: any

通过使用 js-interop，您可以编写与 javascript 几乎相同的代码。

import 'dart:html';
import 'package:js/js.dart' as js;

void main() {
  js.scoped(() {
    js.context.$(new js.Callback.once(($) {
      $('p').hide('slow', new js.Callback.once(() {
        js.context.alert("The paragraph is now hidden");
      }));
    }));
  });
}

主要的区别在于：

• 你需要使用 js.Callback.once 或者 js.Callback.many 来设置回调函数。如果回调只会被调用一次，那么使用 js.Callback.once。
• 你的代码必须被包装在 js.scoped 中。基本上，管理代理生命周期是为了防止内存泄漏。

也就是说，你可以简化上面的代码：

import 'dart:html';
import 'package:js/js.dart' as js;

void main() {
  js.scoped(() {
    js.context.$('p').hide('slow', new js.Callback.once(() {
      window.alert("The paragraph is now hidden");
    }));
  });
}

变化如下:

• js.context.$(new js.Callback.once(($) {不再需要，因为main等同于jQuery的$(function)。
• js.context.alert已被window.alert替换：直接使用DART函数比与JS通信更有效率。

- Alexandre Ardhuin