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 に答える