2012-03-14 65 views
19

正如标题所说,如果我删除从DOM使用脚本标签:当jQuery .remove()用于删除脚本标记时,是否清除加载的javascript?

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

是否Javascript本身保留在内存中或正在清理?

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

对于那些有兴趣在我的理由,要求见下文:

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

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

这是一个类似的方法是什么Facebook并...

Facebook talks frontend javascript

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

  • 的Ajax请求以dialog.php
  • Server生成HTML和JavaScript特定于该对话框,然后将它们编码为JSON
  • JSON返回给客户端。
  • 将HTML附加到<body>,然后一旦呈现,javascript也会附加到DOM中。

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

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

显然一旦对话已被关闭它是从使用jQuery的DOM移除:

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

JavaScript的附加有ID和我也从DOM通过相同的方法除去这一点。

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

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

+0

如果你关心创建对话框JS量,你可以看看EJS。这将允许您从JS创建HTML模板。 – westo 2012-03-14 12:04:13

+0

感谢westo,我使用JsRender进行客户端模板化。然而,我上面提到的方法不仅适用于对话框,还适用于模板不适合的其他很多交互。也许对话的例子不是很好。 – gordyr 2012-03-14 12:08:17

回答

19

否。一旦加载了脚本,它定义的对象和函数就会保存在内存中。删除脚本元素不会删除它定义的对象。这与CSS文件相反,删除元素会删除它定义的样式。这是因为新款式很容易重新流行。你能想象一下,研究脚本标签创建的内容以及如何删除它是多么困难?

编辑:但是,如果你有一个文件定义myFunction,那么你添加另一个脚本,重新定义myFunction到别的东西,新的价值将被保留。如果你想保持DOM清洁,你可以删除旧的script标签,但是这只是删除它。编辑2:“清理”功能,我能想到的唯一的真正方法是有一个JS文件,基本上调用delete window.myFunction为您的其他脚本文件可能定义的每个可能的对象和功能。出于显而易见的原因,这是一个非常糟糕的主意。

+0

确实,可悲的是我想象会是这样。你能想到任何解决办法吗?或者,对于上面给出的情况,是否最好增加对话框的id并使用动态javascript镜像的元素ID?从而确保没有任何潜在的重复引用?或者你觉得整个方法需要重新思考? – gordyr 2012-03-14 12:03:50

+0

谢谢科林克 - 我刚刚看到你的编辑。所以,为了澄清一下,如果我在新创建的#dialog元素上再次使用jQueryUI的$('#dialog')。dialog()小部件,显然不同的javascript ......它会简单地替换旧的?如果是这样,这是完美的。 – gordyr 2012-03-14 12:06:16

+0

什么是显而易见的原因删除是一个坏主意?另外,垃圾回收器不会处理没有任何引用它们的对象吗?看起来好像会有利用垃圾收集器。 – 2014-02-20 13:45:12

4

如果您的脚本已经执行删除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); 
+0

感谢amamasmuller。这个例子非常感谢。 :) – gordyr 2012-03-14 12:42:45

+0

根据情况,也许另一种方法是将您的系统构建为单页应用程序,例如使用Backbone.js。 看看[这篇很好的文章解释了Trello背后的架构](http://blog.fogcreek.com/the-trello-tech-stack/)。 – tomasmuller 2012-03-14 12:47:55