Question

此结构是否会导致内存泄漏以及如何解决（策略建议）？我们有一个页面包含许多动态生成的元素（表，按钮，文本字段，checbbox，组合框等），具体取决于业务规则和用户操作。我们没有任何静态页面。每个元素都是使用json从具有ajax响应的java servlet生成的。

我们有一个包含所有控件的主容器div。有时我们需要删除所有包含的元素并添加新的元素，有时只更新一些属性，例如值。

<div id="bigContainer"></div>

生成元素时，我们生成其html并使用jquery将其存储在bigContainer中。例如，假设我们在第一步有一个按钮和一个文本字段。

var jsButton = '<div id="button1wrapper"><input id="button1" type="button" onclick="buttonAction(this)" style=".."></input></div>';

var jsTextfield = '<div id="text1wrapper"><input id="text1" type="text" onfocus="focusAction(this)" style=".."></input></div>';

我们当前的页面只需要这两个元素：

var currentPage = jsButton + jsTextField;

并使用jquery设置元素。

$('#bigContainer').html(currentPage);

在一些用户交互之后，我们不再需要这些元素，并生成例如复选框。

var jsCheckbox = '<div id="check1wrapper"><input id="check1" type="checkbox" onclick="checkAction(this)" style=".."></input></div>';

我目前只需要这个checbox，所以我把它设置到页面：

$('#bigContainer').html(jsCheckbox);

如您所见，我没有进行任何清理（我没有删除任何元素）。有什么不良做法吗？内存泄漏？事件处理程序？ Zombie dom-objects？

在第二个场景中会发生什么，我生成一个表但是用jquery bind方法注册它的监听器：

var jsTable = '<div id="table1wrapper"><table id=table1><tr><td>colval1</td><td>colval2..</table>';

jsTable += '<script>registerTableCellListeners("table1")</script>';

$('#bigContainer').html(jsTable);

如您所见，表js包含一个函数调用， registerTableCellListeners ，一旦生成表并将其放入DOM中，就会调用它。

当创建表并调用此函数时，它会注册单元格事件：

function registerTableCellListeners(id) {
  $('#id').find('td').bind('click', function() { 
       // handle cell event

例如，在使用一些后，我们不再需要该表，生成一个按钮并设置为容器，它会像这样继续。

$('#bigContainer').html(jsButtonNew);

问题是，当我们不再需要它们时，是否需要在元素上调用jquery方法remove()，或者特别为表删除事件监听器？这种机制是否存在内存泄漏的可能性？关于表现？

使用jquery动态生成元素，检查内存泄漏

0 个答案: