无法从html调用静态方法

Question

我有一个带有静态方法的类，我正试图从我的html页面调用它。当我尝试使用Class.Method()语法调用这个方法时，我得到了一个错误：“is not defined”。当我从其他javascript类的实例调用相同的静态方法时，静态方法工作得很好。

我设法拼凑了一个变通办法，但看起来不太对劲：

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

This question似乎验证了我的信念，即我应该能够使用Class.Method()语法调用我的方法。

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

我做错了什么？

// main.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);

// dialogs.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

Avoid inline handlers，它们有太多的问题，不值得在现代代码库中使用。因为您使用的是模块，所以Dialogs不会全局可用，除非您将其显式地分配给全局对象，正如您已经注意到的，这是一个丑陋的技巧(并且内联处理程序只能引用全局变量)。您应该使用Javascript正确附加事件侦听器:选择脚本中的元素，并对其调用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放到全局对象上--放到一个只针对模块的变量中：

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