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

Posted 2023-03-16

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

【英文标题】：How to use JS codes which are specific to some pages from a single JS file containing JS codes for all the pages?

【发布时间】：2021-12-03 02:08:10

【问题描述】：

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

例如，我有一个 ID 为“user_icon”的用户图标，该图标仅出现在一个页面上，对于该页面，一切正常，但对于另一个页面，它显示错误“未捕获的 TypeError：无法读取空（读取“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;
    
)

【问题讨论】：

使用事件委托。

这能回答你的问题吗？ addEventListener() to non-existent elements?

【参考方案1】：

当您移除绑定了事件的 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，但请记住，当它们被调用时，您的元素必须位于 DOM 中。否则，您会在页面上留下一些僵尸事件，这是严重的内存泄漏，尤其是在构建单页应用程序时。

【参考方案2】：

您可以为此添加一个陷阱。 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;
        
    )

【讨论】：

它解决了我的问题。感谢您的帮助