时间戳

首页 > 解决方案 > 我的 Javascript 代码在我将其包装在自调用函数中后不再起作用

javascript - 我的 Javascript 代码在我将其包装在自调用函数中后不再起作用

问题描述

我在很多代码中看到人们将所有内容都包装在一个自调用函数中，因此所有内容或多或少都保持私密。对我的代码执行此操作导致它不再工作。

我用谷歌搜索了一下，发现将整个源文件放在一个自调用函数中是一种很好的做法，所以我决定也尝试一下。我用我的一小段代码尝试了这个，但在完成之后它就不再起作用了。

(function($) {
    const auth = firebase.auth();

    function logIn(){
        window.alert("pressed log in button");
        var userEmail = document.getElementById("txtEmail").value;
        var userPass = document.getElementById("txtPassword").value;

        auth.signInWithEmailAndPassword(userEmail,userPass).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            window.alert("Error : " + errorMessage);
        });
    };
});

我希望代码能够工作，但每当我按下调用 logIn 函数的按钮时，我都会收到以下错误消息：“未捕获的 ReferenceError：logIn 未在 HTMLButtonElement.onclick 中定义”。这清楚地表明，将我的代码变成自调用函数会使其不再工作。

标签： javascript

解决方案

在我将它包装在一个自调用函数中之后

您还没有将其包装在 IIFE 中。你已经将它包装在一个永远不会被调用的函数中。要使其成为 IIFE，您需要调用它（例如，(whatever_you_want_assigned_to_the_$_argument)在末尾加上）。

我在 Google 上搜索了一下，发现将整个源文件放在自调用函数中是一种很好的做法

这是因为全局变量不好。（这是一个概括）。

未捕获的 ReferenceError：登录未在 HTMLButtonElement.onclick 中定义

由于您没有在代码中分配任何事件处理程序，因此您的 HTML 可能如下所示：

onclick="logIn()"

您正试图调用logIn, 作为一个全球性的。

现在，由于使用 IIFE 的全部目的是停止使用 globals，那是行不通的。

addEventListener使用, 或（因为您似乎正在使用 jQuery）绑定您的事件处理程序，而不是使用 jQuery 包装器。

(function($) {
    function logIn(){
        window.alert("pressed log in button");
    }
    $("button#logIn").on("click", logIn);
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id=logIn>Log In</button>

推荐阅读