我正在创建一个动态内容加载器，其中包含用于在各部分之间导航的菜单。每个选项卡都会加载其相应的 HTML 和 JavaScript 文件。但是，在切换选项卡时，我遇到了 JS 文件中变量的重新声明错误。当我尝试再次进入某个部分时，我在收到此错误之前
未捕获的语法错误：标识符“parcours”已被声明（位于 script.js:1:1）”。
如何动态加载和卸载这些脚本而不发生冲突？
主要html
<body>
<!-- MENU -->
<div id="menuConteneur">
<div class="menuIcon on" id="etudeTravail" onclick="loadContent('etudeTravail/etudeTravail.html', 'etudeTravail/script.js')"></div>
<div class="menuIcon off" id="projets" onclick="loadContent('projets/projets.html', 'projets/script.js')"></div>
<div class="menuIcon off" id="about" onclick="loadContent('about/about.html', 'about/script.js')"></div>
</div>
<!-- DIV CONTENUE DYNAMIQUE -->
<div id="contenu"></div>
<script src="script.js" defer></script>
</body>
主要脚本：
let lastScript = null;
function loadScript(scriptUrl) {
if (lastScript) {
document.body.removeChild(lastScript);
}
const script = document.createElement('script');
script.src = scriptUrl;
script.defer = true;
document.body.appendChild(script);
lastScript = script;
}
function loadContent(page, scriptUrl) {
const xhr = new XMLHttpRequest();
xhr.open('GET', page, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('contenu').innerHTML = xhr.responseText;
if (scriptUrl) {
loadScript(scriptUrl);
}
}
};
xhr.send();
}
loadContent('etudeTravail/etudeTravail.html', 'etudeTravail/script.js');
js之一
let parcours = document.querySelectorAll(".parcour");
parcours.forEach(parcour => {
parcour.addEventListener("mouseover", function () {
console.log("test2");
})
});
console.log("test");
他的html
<div class="parcour">1</div>
<div class="parcour">2</div>
<div class="parcour">3</div>
我实现了一个动态内容加载器，其菜单可以通过加载不同的 HTML 和 JavaScript 文件在各个部分之间切换。我希望脚本加载和卸载时不会出现错误。但是，我在切换选项卡时面临变量的重新声明问题。什么解决方案可以帮助解决这个问题？
切换选项卡时，我遇到了 JS 文件中变量的重新声明错误。当我尝试再次进入某个部分时，我在收到此错误之前
正如您所看到的，一旦您第一次通过
letconst但是，
letconst这意味着，如果每次都在单独的块中重新声明它们，您可以根据需要多次重新声明变量。
因此，一个优雅的解决方案是将脚本作为 IIFE （立即调用函数表达式）.
运行示例
(() => {
let parcours = document.querySelectorAll(".parcour");
parcours.forEach(parcour => {
parcour.addEventListener("mouseover", function () {
console.log("test2");
})
});
})();
console.log("test");
实际上，这是一个独立的匿名函数，一旦解析完毕，它就会运行其中的 javascript。