1

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

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

当我来自 Java 世界时，我对 JavaScript 命名空间和模块的概念感到困惑。我能够将 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方法。但我不知道怎么做。

4

1 回答 1

0

经过一整天的战斗，我找到了解决方案。在goog.module: an ES6 module like alternative to goog.provide文档中，我发现缺少有关goog.scope功能角色的信息 - 所需模块仅在范围调用中可见。

我创建了另一个名为 Closure JS 的文件incrementaldom.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:(

于 2017-05-26T21:26:08.250 回答