如何使用@JsInterop 在 GWT 应用程序中公开增量 DOM 库的 JS 补丁功能

Question

我想在我的 GWT 应用程序中使用增量 DOM 库。

https://google.github.io/incremental-dom/#about

因为我来自 Java 世界，所以我对 Java 脚本命名空间和模块的概念感到困惑。我能够将 Closure Compiler 与 Incremental DOM 的闭包版本一起使用（必须从源代码构建）。

它从以下行开始：

goog.module('incrementaldom');

所以如果我要在常规 JS 中使用它，我会输入：

var patch = goog.require('incrementaldom').patch;

然后 patch 函数将在我的代码范围内可用。但是如何让它可以从 @JsInterop 注释类?

我试过类似的方法：

public class IncrementalDom {

  @JsMethod(namespace = "incrementaldom", name = "patch")
  public static native void patch(Element element, Patcher patcher);

  @JsFunction
  @FunctionalInterface
  public interface Patcher {
    void apply();
  }

}

但它不起作用。我在运行时收到此错误：

(TypeError) : Cannot read property 'patch' of undefined

所以我想我必须以某种方式公开 incrementaldom 模块或至少只公开 patch 方法。但是我不知道怎么办。

Answer 1

折腾了一整天终于找到解决办法了。在 goog.module: an ES6 module like alternative to goog.provide 文档中，我发现缺少有关 goog.scope 函数作用的信息 - 所需模块仅在作用域调用中可见。

我创建了另一个名为 incrementaldom.js:

的 Closure JS 文件

goog.provide('app.incrementaldom'); // assures creation of namespace
goog.require("incrementaldom");

goog.scope(function() {
  var module = goog.module.get("incrementaldom");
  var ns = app.incrementaldom;
  app.incrementaldom.patch = module.patch;
});

goog.exportSymbol("app.incrementaldom", app.incrementaldom);

现在我可以从 Java 代码调用它，如下所示：

public class IncrementalDom {

  @JsMethod(namespace = "app.incrementaldom", name = "patch")
  public static native void patch(Element element, Patcher patcher);

  @JsFunction
  @FunctionalInterface
  public interface Patcher {
    void apply();
  }

}

我仍然必须在 Closure JS 文件中分别定义在原始模块中导出的每个对象。幸运的是我只需要 patch 方法。我希望有一天我会找到 @JsInterop 和 goog.module 不那么麻烦的方法 :(

如何使用@JsInterop 在 GWT 应用程序中公开增量 DOM 库的 JS 补丁功能

How to expose JS patch function of Incremental DOM library in GWT app using @JsInterop

javascript

java

gwt

gwt2

gwt-jsinterop