Question

下面是使用js模块显示模式的示例代码

let appDashBoardFunctions = (()=> {   

    let openModal = ()=> {
        document.getElementById('addMemberPopup').classList.add('open');
    };

    let closeModal = ()=> {
        document.getElementById('addMemberPopup').classList.remove('open');
    };


    //reveal functions
    return {
        openModal: openModal,
        closeModal: closeModal
    }})();

我可以使用以下功能：

document.getElementById('openModalBtn').addEventListener('click', function() {
    appDashBoardFunctions.openModal()
});

但是当在带有onclick =“ appDashBoardFunctions.openModal（）”的html按钮中使用它时，出现参考错误

Answer 1

在为onclick分配 string 时（无论是使用Javascript还是使用HTML属性），解释器只会在单击时查看函数名称，本质上是一个eval字符串-onclick字符串内的任何变量都必须是 global （分配给window），否则您将得到一个{{1} }。（在顶层用ReferenceError声明的变量不会分配给let）

尽管您可以通过分配给window（或使用window.openModal）来修复它，但最好还是用Javascript分配函数本身，而不是HTML属性中的字符串：

var

如果在处理程序内部，您还需要someElement.onclick = appDashBoardFunctions.openModal;来引用包含该函数的对象，则必须对其进行一些调整：

this

（否则，处理程序中的someElement.onclick = () => appDashBoardFunctions.openModal();将引用元素，而不是模块对象）

当然，正如您自己指出的，您也可以使用this，它也很好用。

模块显示模式的参考错误

1 个答案: