无法从 html 调用 static 方法

Question

我有一个 class 和我试图从我的 html 页面调用的 static 方法。 当我尝试使用 Class.Method() 语法调用方法时出现错误：“<Class name > is not defined”。 当我从其他 javascript 类的实例调用相同的 static 方法时，static 方法工作正常。

我设法拼凑了一个解决方法，但它看起来不对：

window.dlg = Dialogs;       // static methods only // do I have to do this?

这个问题似乎证实了我的信念，即我应该能够使用 Class.Method() 语法调用我的方法。

这个问题似乎解决了这个问题，但没有解释如何从 html 调用 static 方法。

我究竟做错了什么？

// 主.js

import { Site } from './site.js';
import { Dialogs } from './dialogs.js';

(async function ($) {
    "use strict";
    window.site = new Site();   // instance methods

    // hack:
    window.dlg = Dialogs;       // static methods only // do I have to do this?
    await window.site.Init();
})(jQuery);

// 对话框.js

class Dialogs {
    static ShowLoginDialog() {
        $('#login-dialog').modal('show');
    }
}
export { Dialogs };

// html

// works            
<a href="#" onclick="window.dlg.ShowLoginDialog()"><i class="icofont-login"/>&nbsp;Log in</a>

// does not work but I think it should. Error msg:  Dialogs is not defined.
<a href="#" onclick="Dialogs.ShowLoginDialog()"><i class="icofont-login"/>&nbsp;Log in</a>

Answer 1

避免内联处理程序，它们有太多问题，不值得在现代代码库中使用。 由于您使用的是模块，因此除非您明确地将其分配给全局 object ，否则Dialogs将无法全局使用，正如您所注意到的，这是一个丑陋的 hack（内联处理程序只能引用全局变量）。 您应该使用 Javascript 正确附加事件侦听器：select 脚本中的元素，并对其调用addEventListener ：

// main.js

import { Site } from './site.js';
import { Dialogs } from './dialogs.js';

(async function ($) {
    "use strict";
    window.site = new Site();   // instance methods

    document.querySelector('a.login-anchor').addEventListener('click', () => {
        Dialogs.ShowLoginDialog()
    });
    await window.site.Init();
})(jQuery);

其中a.login-anchor可以替换为您想要使用监听器定位<a>的任何选择器：

<a href="#" class="login-anchor"><i class="icofont-login"/>&nbsp;Log in</a>

您也不需要将site放到全局 object 中 - 而是放入一个仅限于模块的变量中：

const site = new Site();
await site.init();