如何从包含所有页面的 JS 代码的单个 JS 文件中使用特定于某些页面的 JS 代码？

Question

在我的网站上，我将所有 JavaScript 代码包含在一个文件 common.js 中。 我面临的问题是我的一些 JS 代码特定于一页。 所以它在另一个页面上显示错误。

例如，我有一个用户图标，其 ID 为 'user_icon' 仅出现在一个页面上，对于该页面，一切正常，但对于另一个页面，它向我显示错误“Uncaught TypeError：无法读取 null 的属性（阅读'addEventListener') 在 common.js:11"。 这意味着 JS 无法在另一个页面上找到该元素。 那么，我该如何解决这个问题？ 任何建议都受到高度赞赏。

这是用户图标的代码

var user_icon = document.getElementById('user-icon');
var menu = document.getElementById('menu');
var x = -100;
user_icon.addEventListener('click', function () {
    if (x == -100) {
        x = 0
        menu.style.right = x;
        menu.style.opacity = 1;
    }
    else {
        x = -100
        menu.style.right = x + '%';
        menu.style.opacity = 0;
    }
})

Answer 1

您可以为此添加一个陷阱。 Thst 应该删除 Uncaught TypeError 错误。

var user_icon = document.getElementById('user-icon');
var menu = document.getElementById('menu');
var x = -100;
if(user_icon && menu)
{
    user_icon.addEventListener('click', function () {
        if (x == -100) {
            x = 0
            menu.style.right = x;
            menu.style.opacity = 1;
        }
        else {
            x = -100
            menu.style.right = x + '%';
            menu.style.opacity = 0;
        }
    })
}

Answer 2

当您删除绑定了事件的 DOM 内容时，您必须在删除内容之前删除这些事件。

您可以通过触发bindEvent和unbindEvents ：

window.onload = bindEvents

var menu = document.getElementById('menu');
var x = -100;

function bindEvents() {
  var user_icon = document.getElementById('user-icon');
  user_icon.addEventListener('click', myAction, true);
}

function unbindEvents() {
  var user_icon = document.getElementById('user-icon');
  user_icon.removeEventListener('click', myAction, true);
}

function myAction() {
    if (x == -100) {
        x = 0
        menu.style.right = x;
        menu.style.opacity = 1;
    }
    else {
        x = -100
        menu.style.right = x + '%';
        menu.style.opacity = 0;
    }
}

您可以在适当的时候随意调用bindEvents和unbindEvents ，但请记住，调用unbindEvents时，您的元素必须在 DOM 中。 否则，您将在页面上留下一些僵尸事件，这是严重的内存泄漏，尤其是在构建单页应用程序时。