我想在我的 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 方法。但我不知道怎么办。

请您参考如下方法:

经过一整天的努力，我找到了解决方案。在 goog.module: an ES6 module like alternative to goog.provide文档中我发现缺少有关 goog.scope 函数 Angular 色的信息 - 所需的模块仅在作用域调用内可见。

我创建了另一个名为 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 找到不那么麻烦的方法:(