使用jQuery进行JavaScript 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>

任何帮助表示赞赏.

Answer 1

谢谢你的问题!我不确定自己,但事实证明这是可能的.:)

首先,添加js到pubspec.yaml:

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也使用$.所以在此期间你需要使用jQuery你的Dart代码.

说了这么多,我们可以通过JS-Dart互操作使用jQuery很酷,但是Dart应该真的为我们这样做.所以我打开了错误http://code.google.com/p/dart/issues/detail?id=6526

Answer 2

首先将js依赖项添加到pubspec.yaml:

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通信更有效.