Javascript 在一个页面上运行多个Maquette投影仪 一些背景

我使用一个基于前端组件的UI框架，该框架通过jQuery完全管理其UI。在最初创建时，这听起来并不疯狂，jQuery是制作交互式web组件的稳定的逻辑选择。然而，现在手动跟踪每个变量和数据的每次更改，然后在DOM中反映出来，已不再是唯一可行的选择。随着框架的发展，维护一致的代码风格和代码效率的负担也随之增加

我最近一直在查看Maquette.js，它看起来可能只是帮助解决这些挑战和更多问题的框架

问题 我知道使用该技术将Maquette与其他库集成。然而，我的框架很大，很多人都依赖它，将所有渲染转换为Maquette是不可行的。至少不是一下子。正因为如此，如果我真的使用Maquette，我预见到自己将被迫为组件的每个实例使用新的投影仪。这是我所关心的

与使用单个投影仪渲染所有内容相比，页面上显示大量投影仪是否会对性能产生负面影响？换句话说，就性能而言，将一页上的投影仪数量降至最低有多理想

如果代码有用，我已经修改了Maquette主页上的简单示例来说明这一点。1000台投影仪同时运行。看起来很好，但感觉好像我在做一件Maquette不该做的事

document.addEventListener('DOMContentLoaded', function () {
  var h = maquette.h;
  var domNode = document.body;
  var yourName = ''; // Piece of data
  var numbers = [];

  // Load up our array
  for(var i = 0; i < 1000; i++){ numbers.push(i); };

  numbers.forEach(function(){
     var projector = maquette.createProjector();
    // Plain event handler
    function handleNameInput(evt) {
      yourName = evt.target.value;
    }

    // This function uses the 'hyperscript' notation to create the virtual DOM. 
    function renderMaquette() {
      return h('div', [
        h('input', { 
          type: 'text', placeholder: 'What is your name?', 
          value: yourName, oninput: handleNameInput 
        }),
        h('p.output', ['Hello ' + (yourName || 'you') + '!'])
      ]);
    }

    projector.append(domNode, renderMaquette);

    });
});

document.addEventListener（'DOMContentLoaded'，函数（）{
var h=成型模。h；
var domNode=document.body；
var yourName=''；//一段数据
var数=[]；
//加载我们的阵列
对于（vari=0；i<1000；i++）{numbers.push（i）；}；
numbers.forEach（函数（）{
var projector=maquette.createProjector（）；
//普通事件处理程序
函数handleNameInput（evt）{
yourName=evt.target.value；
}
//此函数使用“hyperscript”表示法创建虚拟DOM。
函数renderModel（）{
返回h（'div'[
h（'输入'，{
键入：“文本”，占位符：“你叫什么名字？”，
value:yourName，oninput:handleNameInput
}),
h（'p.output'，['Hello'+（yourName | |'you'）+'！'）
]);
}
append（domNode，renderMaquette）；
});
});

问得好。投影仪重量轻，而且是被动的。如果同时在所有1000台投影机上调用scheduleRender，我只会看到一些性能损失。这意味着每个投影仪都调用requestAnimationFrame。如果您同时只在几个投影仪上调用scheduleRender，那么开销应该最小。

太棒了，谢谢！经过一点测试后，我认为这很可能不是问题，但感谢你给我的保证。