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

Question

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

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

当我从Java世界来了，我用JavaScript命名空间和模块的概念上的挣扎。我能够使用Closure Compiler和闭包版本的增量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另一封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（