0

私は、mithril.js を使用してパフォーマンスに敏感なアプリを作成することを計画しています。アプリには、いつでも更新できる何千もの DOM 要素があり、更新された要素のみが再描画されるようにする必要があります。

私の質問は、mithril 自動再描画システムが DOM の変更をログに記録し (ブラウザー コンソールまたは任意の場所に)、それを確認して、意図した DOM 要素のみが変更されていることを完全に確認できるようにする方法はありますか? 私は自分自身の論理的な間違いから保護し、ミスリルが変更された要素にのみ触れていることを確信したい.

4

1 に答える 1

3

W3C MutationObserver API を使用して、DOM で行われている変更をブラウザーに記録させることができます (API は扱いにくいですが)。これにより、DOM に加えられたすべての特定の変更について完全な知識を得ることができます。

takeRecords再描画後に結果をログに記録するには、メイン アプリケーションの後に接続されていない (つまり、ライブ ドキュメントに挿入されていない) コンポーネントをマウントし、Mithril のconfig解決時にオブザーバーから空のルート ノードを取得します。このコードはその場で書かれており、テストされていませんが、アイデアが得られるはずです:

// Application code 

// Mount an unattached component 
// to log mutation records
m.mount(
  document.createElement( 'div' ),
  {
    controller : function(){
      return new MutationObserver( function( records ){
        console.log( records )
      } )
    },
    view : function( ctrl ){
      return m( 'div', {
        config : function( el, isInitialized ){
          if( !isInitialized ){
            ctrl.observe( el, {
              attributes    : true,
              characterData : true,
              childList     : true
            } )
          }
        }
      } )
    }
  }
)

編集:投稿したコードは、試してみたところ機能しませんでした。作業コードを提供するために更新しました。ご覧のとおり、複雑で直感的ではなく、醜いです。私はこれを何度もやりたくなり、そのたびに MutationObserver API に苦労しました。ミューテーション レコードのリストは簡単に読めますが、オブザーバーの初期化は面倒で、常にコピーと貼り付けが必要です。そこで、これを簡単にするために小さなラッパーMutyを書きました。Muty があれば、あとはmuty( muty.options, el, records => console.log( records ) ).

于 2016-01-11T19:57:48.910 に答える