javascript - 动态加载Javascript理解

Question

我有一个带有主要区域的页面结构。该站点的每个页面都使用 ajax 加载到该区域。为了正确加载新页面要使用的脚本，我使用了取自 http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS 的下一个代码。

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'somescript.js';
newScript.id = "dynamicScript";
headID.appendChild(newScript);

我的问题是，当用户多次调用页面时会发生什么情况，所有的脚本都被一次又一次地加载？那以后会不会导致内存问题？

我试图在创建新元素之前删除脚本元素:

var headScriptfunctions = document.getElementById("dynamicScript");
if (headScriptfunctions != null){
    head.removeChild(headScriptfunctions);
}

脚本从头部删除，但无论如何，脚本仍然存在，因为我可以调用它。我想使用 jquery getScript 函数，但我不知道多次调用同一个脚本时它是如何工作的。

Answer 1

这不仅是内存问题，更重要的是引用和初始化问题。

简单示例:

var userClicksCountFromStart = 0;

document.body.addEventListener("click", function () {
    userClicksCountFromStart += 1;
});

重新加载此脚本将重新初始化 userClicksCountFromStart至 0 , 你就忘记​​了你的计数。此外，您现在有 2 个监听器，可能添加了两次 +1每次点击。

如果脚本会修改页面(添加一些元素等)，它可能会更加明显。因此，一定要避免多次加载脚本。

如您所知，删除 <script>一旦 JavaScript 代码执行完毕，来自 DOM 的标记就毫无意义了。

至于避免多次加载相同的脚本，您可能应该引用该帖子:getScript - How to only call if not already called