打开多个选项卡/弹出窗口时 Mithril 应用程序崩溃

Question

我正在使用 Mithril 开发一个项目，每当我单击一个元素时，它都会在桌子上打开一个弹出组件，该组件基本上由 4 个相互嵌套的 div 组成，最深的一个是另一个列表。

问题是，每当我打开第 9 个弹出窗口时，应用程序就会崩溃。有没有办法优化内存使用，以便我可以打开更多弹出窗口？ （这是该项目的一项重要功能，能够打开更多弹出窗口）。

每个弹出窗口大约有 5 到 6 个 API 调用，具体取决于打开的元素。

Answer 1

也许您可以在此处提供更多信息，这是一个简单的示例，仅打开其中包含关闭按钮的弹出窗口。 这假设秘银已加载到页面上并可通过

m

访问。

<div id="app">
</div>
<script>
function App() {
  let zindex=1, top=200, left=20, popups=[];
  
  function openAnotherPopup(e) {
    e.preventDefault();
    zindex += 1;
    top += 20;
    left += 20;
    let ourIndex = popups.length;
    let popup = {zindex, top, left}
    function closer(e) {
      e.preventDefault();
      popups.splice(popups.indexOf(popup), 1);
    }
    popup.closer = closer;
    popups.push(popup);
  }
  return {
    view: function () {
      return m('', 
         m('', popups.map(function (popup) { 
          return m(Popup, {popup: popup}); 
        })),
         m('button', {onclick: openAnotherPopup}, 'Popup'));
    }
  }
}

function Popup() {
  return {
    view: function ({attrs: {popup: {closer, zindex, top, left}}}) {
      let style = {
          zIndex: zindex,
          position: 'absolute', 
          top: top + 'px',
          left: left + 'px',
        };
      return m('div', {
        style: style
      },  m('div', m('div', m('div', m('button', {onclick: closer}, 'close')))));
    }
  }
}

m.mount(document.getElementById('app'), App);
</script>