jQuery .remove() 是否在用于删除脚本标记时清除加载的 javascript?

IT技术 javascript jquery
2021-03-20 00:16:12

正如标题所说,如果我使用以下方法从 DOM 中删除脚本标签:

$('#scriptid').remove();

javascript 本身是保留在内存中还是被清除了?

或者......我完全误解了浏览器对待javascript的方式吗?这是很有可能的。

对于那些对我的提问原因感兴趣的人,请参见下文:

我正在将一些常见的 javascript 交互从静态脚本文件转移到 PHP 中动态生成的文件中。当用户需要它们时按需加载。

这样做的原因是为了移动逻辑服务器端并运行一个小脚本,从服务器端返回,客户端。而不是拥有包含大量逻辑的大型脚本,客户端。

这与 facebook 的做法类似......

Facebook 谈论前端 javascript

如果我们以一个简单的对话框为例。而不是在 javascript 中生成 html,将其附加到 dom,然后使用 jqueryUI 的对话框小部件加载它,我现在正在执行以下操作。

  • 向 dialog.php 发出 Ajax 请求
  • 服务器生成特定于此对话框的 html 和 javascript,然后将它们编码为 JSON
  • JSON 返回给客户端。
  • HTML 被附加到<body>然后一旦呈现,javascript 也被附加到 DOM 中。

javascript 在插入时自动执行,并打开动态对话框。

这样做大大减少了我页面上的 javasript 数量,但我担心清理插入的 javascript。

显然,一旦对话框关闭,它就会使用 jQuery 从 DOM 中删除:

$('#dialog').remove();

javascript 附加了一个 ID,我也通过相同的方法从 DOM 中删除了它。

但是,如上所述,使用 jQuery 的 .remove() 实际上是从内存中清除了 javascript 还是简单地<script>从 DOM 中删除了元素?

如果是这样,有什么办法可以清理它吗?

2个回答

不会。一旦加载脚本,它定义的对象和函数就会保存在内存中。删除脚本元素不会删除它定义的对象。这与 CSS 文件相反,在 CSS 文件中,删除元素确实会删除它定义的样式。那是因为新样式很容易回流。你能想象找出脚本标签创建了什么以及如何删除它会有多困难吗?

编辑:但是,如果您有一个定义的文件myFunction,那么您添加另一个重新定义其他内容的脚本,myFunction新值将被保留。script如果您想保持 DOM 干净,您可以删除旧标签,但这就是删除它的全部内容。

EDIT2:我能想到的“清理”函数的唯一真正方法是拥有一个 JS 文件,该文件基本上调用delete window.myFunction其他脚本文件可能定义的每个可能的对象和函数。出于显而易见的原因,这是一个非常糟糕的主意。

谢谢 Kolink - 我刚刚看到你的编辑。所以只是为了澄清一下,如果我要在新创建的#dialog 元素上第二次使用 jQueryUI 的 $('#dialog').dialog() 小部件,使用明显不同的 javascript ......它会简单地替换旧的吗?如果是这样就完美了。
2021-05-01 00:16:12
删除是一个坏主意的明显原因是什么?另外,垃圾收集器不会处理没有任何引用它们的对象吗?似乎会利用垃圾收集器。
2021-05-04 00:16:12
确实,可悲的是,我认为情况会是这样。你能想到什么解决办法吗?或者,对于上面给出的情况,最好增加对话框的 id 并让动态 javascript 反映该元素 id?从而确保没有任何潜在的重复引用?或者您是否觉得整个方法需要重新考虑?
2021-05-10 00:16:12
注意:向 js 文件添加查询字符串(日期时间戳)将重新加载文件。MyFile.js + '?v=' + MyStamp 。如果您正在加载具有相同函数名称的其他文件,这很有效。
2021-05-17 00:16:12

如果您的脚本已经执行删除 DOM 元素不会摆脱它们。转到任何带有 JavaScript 的页面,打开您喜欢的 JavaScript 控制台并输入 $("script").remove()。一切都在继续运行。

这证明了@Kolink 的回答:

http://jsfiddle.net/X2mk8/2/

HTML:

<div id="output"></div>

<script id="yourDynamicGeneratedScript">
  function test(n) {
    $output = $("#output")
    $output.append("test " + n + "<br/>")
  }
  test(1);
</script>

Javascript:

$("script").remove();
// or $("#yourDynamicGeneratedScript").remove();

test(2);
test(3);
test(4);

function test(n) {
  $output = $("#output")
  $output.append("REDEFINED! " + n + "<br/>")
}

test(5);
test(6);
test(7);
根据具体情况,也许另一种方法是将您的系统构建为单页应用程序,例如使用 Backbone.js。查看这篇很好的文章,解释了 Trello 背后的架构
2021-04-28 00:16:12
谢谢托马斯穆勒。非常感谢这个例子。:)
2021-05-16 00:16:12