时间戳

首页 > 解决方案 > 无法从 html 调用静态方法

javascript - 无法从 html 调用静态方法

问题描述

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

我设法一起解决了一个解决方法，但它看起来不正确：

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

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

这个问题似乎解决了这个问题，但没有解释如何从 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);

// 对话框.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>

标签： javascript

解决方案

避免使用内联处理程序，它们有太多问题值得在现代代码库中使用。由于您使用的是模块，Dialogs除非您将其显式分配给全局对象，否则它将无法全局使用，正如您所注意到的，这是一个丑陋的 hack（并且内联处理程序只能引用全局变量）。您应该使用 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);

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

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

您也不需要放入site全局对象 - 而是放入一个仅适用于模块的变量：

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

推荐阅读