1

何よりもまず、「Javascript 差分テンプレート」、「Javascript update DOM without reparse」、「Javascript render UI using deltas」、その他のバリエーションなど、適用できると思われるさまざまな名前で、これについて広範な調査を行いました。私の質問をカバーする既存のスレッドを見逃した場合は、ご容赦ください。

基本的に、ブラウザーのほとんどの DOM パーサーがすでに次のことを行っているかどうかをまず知りたいのですが、答えはノーだと確信しています: DOM を差分的に更新しますか (つまり、同じツリーで変更されたノードのみ最後の更新) ノードが変更されたとき? 私が言ったように、答えはノーだと思います。実際には、更新されたノードとそのツリー内のすべてを再解析して再レンダリングします。

これが私の質問につながります: データ モデルと DOM への差分更新を管理できる Javascript ライブラリはありますか?

私はこれについて本当に明確ではないかもしれないことを認識しているので、私が何を意味するのかを説明するためにいくつかのコードを提供します: http://jsfiddle.net/btZ3e/6/

その例では、イベントを含む「イベント キュー」(実際にはタイムライン) があります。UserEvent にはすべて一意の ID があります。現在の動作方法は、UserEvents が execute() および undo() できることです。前者では、メモリ内のデータ (myAppManager.dataModel) を変更し、DOM に <p> を追加しますが、後者ではこれらの変更を元に戻します。(各 UserEvent の undo() は、柔軟性を高めるために同じ UserEvent の execute() 内で定義されます。イベントを個別に移動することを検討できます)

次に、 myAppManager.render() があります:

 var myAppManager = new function () {
     this.dataModel = {
         someValue: 0,
         disableButton: false
     };

     this.render = function () {
         $('#displaysomevalue').text(this.dataModel.someValue);
         $('#go').prop('disabled', this.dataModel.disableButton)
     }
 }

myAppManager.render() が最後の更新以降に変更されたものだけを更新することはどのように可能でしょうか? これは、データモデルにも何らかの差別化システムが必要になることを意味すると思います。最終的には、Websocket を介して 1 秒あたり複数の新しい UserEvents (最悪の場合、1 秒あたり 20 ～ 30 としましょう) を受け取ることになるため、これについて疑問に思っています。新しい部分ごとに UI 全体を再レンダリングする必要があるかどうか疑問に思っていました。私が得るデータの。私は Javascript テンプレートを調査して、それらがどのように機能するかを確認しました。

document.getElementById('someTemplateContainer').innerHTML = someTemplateEngine.getHtmlOutput();

ただし、場合によっては必要なだけ頻繁に更新する必要があるとは思いません。これに関する以前の作業はありますか？何か見逃しましたか？どうもありがとうございました！

4

1 に答える 1

1

例として、Backbone.js がこれを行う方法は、モデル (基本的に名前:値のペア) がビュー/テンプレートによってサポートされ、そのモデルに のようなイベントが関連付けられていることですchange。<ul>モデルに裏打ちされた、それぞれ<li>が 1 つの Backbone ビューである場所があるとします。

すべてのモデルのイベントをバインドchangeして、独自のビュー (および独自のビューのみ) を再レンダリングできます。そのため、5 番目の<li>名前が変更されると、その の内容だけが再レンダリングされ<li>、残りの部分<ul>は変更されません。

これにより、新しいモデルまたは更新されたモデルのみが DOM ノードに触れて更新されます。

違いは、「全体のどの部分が変更され、それらを単にレンダリングするか」を知る必要がないという<ul>ことです。これは、実際に問題を一連の小さな問題に分解し、それぞれが独自のレンダリングとレンダリングを担当しているためです。ロジックを更新しています。（他のフレームワークにも同様のパターンがあると確信しており、バニラJSでも間違いなく実行できます）

于 2013-06-25T19:41:32.783 に答える