1

我正在构建一个 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;
}
4

1 回答 1

2

这是安全的，因为在您的 javascript 和 DOM 元素超出范围（您的页面消失，javascript 对象超出范围）之后的某个时候，内存最终将被清理。

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

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

HTML：

<table>
   <tbody data-bind="foreach: Emails">
      <tr>
        <td data-bind="html: To"></td>
        <td data-bind="html: From"></td>
      <tr>
   </tbody>
</table>

JavaScript：

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

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

ko.applyBindigns(viewModel);

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

作为额外的奖励，每当您向 viewModel.Emails 数组添加或删除电子邮件时，DOM 都会更新。例如，仅仅调用viewModel.Emails.remove(someEmail)会自动为你更新 DOM；.push 同上。

于 2013-01-29T18:03:58.497 回答