是JavaScript<-&燃气轮机；DOM循环引用在现代浏览器中是否安全？

我正在构建一个AJAX应用程序，它大量使用表来显示数据。为了保持设计简单，最好能够将表行（DOM）与数据对象（JavaScript）绑定，反之亦然。因此，例如，如果单击一行，我就知道该行与哪个数据对象一起，或者如果删除了一个数据对象，我就很容易知道要从表中删除哪一行。几年前，当我尝试这一点时，我最终导致了大量内存泄漏。据我所知，IE8+解决了大部分问题。Chrome、FireFox和Safari的现代版本怎么样

这是代码的一个例子，现在这个“安全”吗

// Email class, holds info about each email displayed in a table
function Email()
{
   this.To = "";
   this.From = "";
   this.Row = null;
}

// This array would actually come from an AJAX web service call
var Emails = new Array();
Emails[0] = new Email();
Emails[0].To = "whatever";
Emails[0].From = "hello";
Emails[1] = new Email();
Emails[1].To = "whatever";
Emails[1].From = "hello";

// Code like this would be used to build initial table, after this rows would
//  be added deleted as updates arrive via AJAX calls    
var table = document.createElement("table");
for(var x=0;x<Emails.length();x++)
{
   var row = table.insertRow(-1);
   row.Email = Emails[x]; // Is this safe?
   Emails[x].Row = row; // ...and also this?
   var cell = row.insertCell(-1);
   cell.innerHTML = Emails[x].To;
   cell = row.insertCell(-1);
   cell.innerHTML = Emails[x].From;
}

//Email类，保存有关表中显示的每个电子邮件的信息
功能电子邮件（）
{
此。To=“”；
这个。从=”；
this.Row=null；
}
//这个数组实际上来自一个AJAX web服务调用
var=新数组（）；
电子邮件[0]=新电子邮件（）；
电子邮件[0]。发送至=“无论什么”；
电子邮件[0]。发件人=“你好”；
电子邮件[1]=新电子邮件（）；
电子邮件[1]。发送至=“无论什么”；
电子邮件[1]。发件人=“你好”；
//类似这样的代码将用于构建初始表，在此之后，行将
//通过AJAX调用在更新到达时添加或删除
var table=document.createElement（“表”）；
对于（var x=0；x这是安全的，因为在javascript和DOM元素超出范围（页面消失，javascript对象超出范围）后，内存最终会被清理

不过，我建议不要这样做。基本上，您是在代码中创建一个表，然后将这些DOM元素与业务对象关联起来。这是UI和逻辑的混合

相反，我建议使用，让它为您处理所有DOM到JavaScript的绑定。使用KnockoutJS，我会这样编写您的代码：

HTML:

现在您的UI停留在DOM中，而您的逻辑停留在JavaScript中

作为额外的好处，每当您向viewModel.emails数组添加或删除电子邮件时，DOM都会更新。例如，只需调用viewModel.emails.remove（someEmail）将为您自动更新DOM；与.push相同。
谢谢。KnockoutJS的webmail教程为我提供了很多想法和新知识。我肯定会在我的数据列表/显示中使用它或类似的东西。对于其他一些领域，我仍然希望使用纯JS，因此很高兴了解用它保存JS对象的基本概念DOM对象和visa versa现在是无泄漏的。听起来不错。如果你想坚持使用纯JS，没问题。KnockoutJS为我节省了很多时间，所以我开始依赖这个工具来帮助我用更少的代码更快地构建东西。但对你有用的东西都可以。
<table>
   <tbody data-bind="foreach: Emails">
      <tr>
        <td data-bind="html: To"></td>
        <td data-bind="html: From"></td>
      <tr>
   </tbody>
</table>

var viewModel = {
   Emails: ko.observableArray()
};

makeSome.AjaxCall(function(emailResults) {
    viewModel.Emails(emailResults);
}

ko.applyBindigns(viewModel);