Cycle.js 驱动程序中可以有多个 DOM 对象吗？答案

【问题标题】：Can there be more than one DOM object in the Cycle.js drivers?Cycle.js 驱动程序中可以有多个 DOM 对象吗？
【发布时间】：2018-02-27 17:40:46
【问题描述】：

到目前为止，我发现的所有 Cycle.js 示例都在 run(main, drivers) 的 drivers 参数中使用了一个名为“DOM”的 DOM 对象。是否可以有多个对象，例如，一个名为“DOM1”，另一个名为“DOM2”？这样做的目的是在一个 HTML 页面中控制两个独立的动态 DOM 区域，以保持第三个 DOM 区域在index.html 中静态定义，并夹在 DOM1 和 DOM2 之间。

作为一个附带问题，我看到的示例通常针对具有#app 或#main-container 的ID 的HTML div，然后使用@cycle/dom div 函数定义接收器，因此在div 中创建一个不必要的div AFAICT。我还没有找到关于虚拟节点应该如何定义的明确解释或参考。假设上面的 DOM2 以 HTML form 元素为目标，并且应该包含两个 input 元素。在所有示例中必须以div 开头，还是可以直接在.map 调用中定义inputs，如果是，如何？

【问题讨论】：

这是ESNextbin 两个独立 DOM 的演示。
谢谢@bloodyKnuckles。所以我猜答案是是的，你可以有两个或更多的DOM。但是，我的问题现在变成了“DOM 必须是独立的吗？”正如您提到的和演示中所示，或者一个 DOM 至少可以被动地影响另一个，例如 DOM1 中的输入字段和 DOM2 中的 h1 元素。我想我可以对此进行试验。

标签： cyclejs

【解决方案1】：

没有什么可以阻止您在您的应用程序中使用DOM1 和DOM2 接收器。 bloodyKnuckles 的例子完美地说明了这一点https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb

话虽如此，我不确定我是否真的明白这样做的意义。如果是性能问题，我认为将应用程序的渲染拆分为两个 DOMDriver 不会有太大收获。虚拟 DOM 库（在循环的情况下为 snabbdom）经过定制，可识别未更改的 DOM 片段，而后者仅更新了后者。

如果是责任问题（这 2 块 DOM 有非常不同的用途），那么我宁愿创建两个不同的循环应用程序，它们都在 DOM 的不同部分呈现。（然后在主文件中调用run 两次）

function app1(sources) {
  return {
    DOM: xs.of(div("hello from app1"))
  }
}


function app2(sources) {
  return {
    DOM: xs.of(div("hello from app2"))
  }
}

run(app1, {
  DOM: makeDOMDriver("#app1")
})


run(app2, {
  DOM: makeDOMDriver("#app2")
})

这样您就可以清楚地分离两个应用程序的关注点。

现在回答您关于为什么需要将一段虚拟 DOM 包装在 div 中的问题。这是因为一个虚拟 DOM 必须有一个 single root 元素。换句话说：一块虚拟 DOM 必须是独立的（就像 HTML 文档只有一个 <html> 元素，它是根）。实际上，这是一个很好的约束，因为它迫使您拥有独立的组件。在您给出的示例中（带有 <input> 字段），返回这样的 vDOM 绝对没有问题：

DOM: xs.of(input(/*...*/))

但如果你的组件有一个input 和一个label，那么你需要将它包装在另一个 vNode 中

DOM: xs.of(div([label(/*...*/), input(/*...*/)])

【讨论】：

既不是业绩也不是责任。我只是不愿意在 JavaScript（实际上是 TypeScript）中编写大型静态区域。但是，我现在意识到“静态”区域确实需要更新，因此分割区域的问题没有实际意义。