轨道mithril.js自动重绘系统

Question

我计划使用mithril.js编写一个性能敏感的应用程序，该应用程序将有数千个DOM元素可以随时更新，而且我必须确保只有更新的元素被重新绘制。

我的问题是，是否有一种方法可以让mithril自动重绘系统记录DOM更改(到浏览器控制台或任何地方)，这样我就可以查看它并绝对确定只有预期的DOM元素被更改了吗？我想保护自己不受逻辑错误的影响，并且相信mithril只是在接触变化的元素。

Answer 1

您可以使用W3C MutationObserver API来让浏览器记录DOM中正在发生的更改(尽管这个API非常谨慎)。这可以让您完全了解对DOM所做的每一项具体修改。

为了在重绘后记录结果，您可以在主应用程序之后挂载一个单独的组件(即从未注入到活动文档)，并从takeRecords的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.options, el, records => console.log( records ) )。