javascript - Vaadin 14 Springboot javascript 不工作

Question

我正在尝试开发我的第一个 Vaadin 14 应用程序，我也在为它使用 Spring 引导框架。我创建了一个 javascript 文件，我将它放入名为 teams.js 的文件夹 frontend/src 中，并尝试使用 @JsModule("src/teams.js") 导入它>。我的 Root View 类如下所示:

@Route("")
@PageTitle("Teams organization store init")
@Slf4j
@JsModule("src/teams.js")
@Tag("TeamsEntry")
public class TeamsEntryView extends VerticalLayout implements BeforeEnterObserver {

    public TeamsEntryView() {
        initTeams();
    }

    private void initTeams() {
        var ui = UI.getCurrent();
        var page = ui.getPage();
        log.info("Teams initialization...");
        page.executeJs(getTeamsConfig()).toCompletableFuture().whenComplete(((jsonValue, throwable) ->
                log.info("Teams initialization completed: {} with throwable {}", jsonValue.toJson(), throwable.getMessage())
        ));

    }

    private String getTeamsConfig() {
        return """
                console.log('ss');
                window.initTeams();
                console.log('xx');
                return true;
                """;
    }
...

我的 js 文件如下所示:

window = {
    initTeams: function () {
        console.log('initTeams...');
    }
}

在这种情况下，我在浏览器的控制台中看到“ss”，但仅此而已。如果我删除 window.initTeams(); 行，我也会得到“ss”和“xx”。如果我在 js 文件中声明一个简单的函数并在没有“窗口”类的情况下调用它，我会得到类似的结果。如果我使用 @Javascript 或 page.addJavascript("src/teams.js") 我在页面加载时收到此错误:“> unexpected character”如果我尝试在可完成的 future 调用 join() 或 get()，浏览器会卡住。如果我使用 @Javascript("frontend://src/teams.js") 我会收到一些 CORS 错误，就像它试图从“前端”主机下载某些东西一样。我试图将 @JsModule 放在组件上而不是我的 View 上。它不起作用。我试图将我的 js 文件放到根目录和资源文件夹中。

我找不到任何其他解决方案来通过 spring boot 将我的 js 文件导入和使用到 vaadin14 中。另外，我不确定为什么如果我在可完成的 future 调用“join()”时浏览器会卡住，即使我在浏览器日志中看到控制台日志，sentToBrowser 的结果也会返回 false...

有人可以向我解释我应该如何导入 javascript，为什么我当前的代码不起作用，以及为什么“join()”会卡住浏览器吗？

提前致谢!

@编辑

我也尝试过使用这个注释 @JavaScript("./src/teams.js") 和这样的 js:

    function initTeams () {  
        console.log('initTeams...');  
        console.log("Teams initialized!")  
    }

@编辑

好吧，我终于让它工作了。js 文件必须位于 root/src/main/webapp/src 文件夹下。@JavaScript 和 @JsModule 都不适合我，所以我不得不将我的 js 文件导入为:

        var ui = UI.getCurrent();
        var page = ui.getPage();
        page.addJavaScript("src/teams.js");

然后我可以像 window.initTeams() 或 initTeams() 这样调用它，两者都可以正常工作。虽然下面的可完成 future 仍然不会执行，并且 isSentToBrowser() 总是返回 false。

page.executeJs(getTeamsConfig()).toCompletableFuture().whenComplete(((jsonValue, throwable) ->
                log.info("Teams initialization completed: {} with throwable {}", jsonValue.toJson(), throwable.getMessage())
        ));

如果路径以“.”开头，我必须提一下像 page.addJavaScript(".src/teams.js"); 然后它找不到文件。

有没有人有答案，为什么可完成的 future 永远不会执行？

Answer 1

问题是下面的代码重新定义了window对象:

window = {
    initTeams: function () {
        console.log('initTeams...');
    }
}

您是想向 window 对象添加一个函数吗？像这样:

window.initTeams = function () {
    console.log('initTeams...');
};

如果您想让代码在视觉上与您的代码相似:

window = {
    ...window,
    {
        initTeams: function() {
            console.log('initTeams...');
        }
    }
}

其他选项:

window['initTeams'] = function() {...}
Object.assign(window, {initTeams: function() {...}})
Object.defineProperty(window, 'initTeams', {value: function() {console.log('foo')}});

一定会爱上 JavaScript...

此外，为了获得更多知识，无法调用@Edit 部分中提到的代码。调用 initTeams() 等同于 window.initTeams()。该函数必须存在于 window 对象中。这就是为什么，例如，您会看到一些自定义元素定义为 customElements.define(...) 和 window.customElements.define(...)。