拥有一个包含大 DIV 的字符串并使用 JS 将其注入 html 是一种常见的做法吗

Question

在 JS 中将大型 div 树作为字符串存储并在需要时使用 .innerHTML 变量将其插入 HTML 是一种常见的做法吗？例如，我需要在用户单击按钮时显示一个表单。目前，我将表单的 HTML 作为字符串保存在 javascript 文件中，当用户单击该按钮时，该字符串将被注入到主 HTML 文件中。这是解决此类问题的方法还是有更好的 solution/algorithm？我正在尝试使用电子制作本机应用程序。我不得不反复做类似的操作，而我的JS文件主要是字符串。是否有解决此问题的框架？谢谢！

Answer 1

好的，我将从讨论的角度来解决这个问题。给定：

Html 代码保存在 JS 文件中的字符串变量中。
目的是在事件触发时显示 DOM 的部分。（我松散地使用术语 DOM）。问题：
这是否应该通过 css 操作来完成，即保持该部分隐藏，然后在事件发生时显示它。
这应该通过替换或插入内容到触发器部分来完成吗？

两种方法都有效。 Web 开发人员来到本机开发的世界是因为不习惯之前的某些东西的概念 DOM。我们所知道的是 DOM 一切都以运行开始并以 DOM 结束。

Electron通过多进程模型将chrome+nodejs打包到一个环境中。这意味着您在 Electron 应用程序中的程序以 Node 脚本开始，并且没有 DOM。想都没想。

假设Node.js得到运行ning并且我们使用JS来运行一堆函数。然后是使用这个称为浏览器 window 的魔法 class 的时候了。我们启动它，它调用 chrome 创建这个 classical 浏览器 window。就像在浏览器或另一个 excel sheet 或其他任何东西上打开一个新标签一样；通过浏览器 window 我们正在创建一个完全独立的进程来加载 HTML 页面。有HTML就有JS，有CSS；所有这些加起来就是 DOM。 DOM 中发生的一切都将保留在 DOM 中； node.js 不直接控制它，也不 DOM 控制 node.js。必须在操作时调用它们，就像您从触发器本机浏览器功能提交时一样，这显然由电子环境维护，因为 chrome 被捆绑到其中。换句话说，我们不会运行上网。这一切都发生在当地。因此，原生 pp 开发一词。这有点像劫持。

无论如何回到问题 JS 或 CSS...无论哪种方式它的 DOM 相关问题。话虽这么说，但人们对传统浏览器中发生的事情的期望并没有什么不同。

CSS 方式

<div id='container'>
<div id='something' style='display:none;'>waited for button click to show</div>

</div>

然后在按钮上单击所有你需要做的就是将 display: none; 更改为 display:block; 你甚至可以创建切换，其中显示属性在点击等时发生变化

JS方式

    <div id='container'></div>
<script>
var button = document.querySelector("#button");
button.onclick = function(){
document.querySelector("#container").innerHTML = "<div id='something' style='display:none;'>waited for button click to show</div>";};
</script>

两种方式都可以！但是，还有但是。如果你 CSS 像普通浏览器功能一样 DOM 在绘制时已经知道有问题的元素。而通过 JS 方式 DOM 元素绘制后不太了解。
这引发了一个问题，即通过 JS DOM 新注入的内容可能触发的任何事件都不知道，因为它们尚未映射到内存中。所以任何自定义的点击或什么都不会通过 JS 方式工作。他们将通过 CSS 方式，因为所有这些都已映射到初始油漆上。

所以你要么必须在注入后运行一堆事件函数让 DOM 知道发生了什么变化，然后告诉它做什么。它不会自己识别事物。或者你必须采用事件委托的方式，即捕获容器 div 上的所有事件，然后过滤它是哪个事件并相应地做一些事情。 DOM 会处理剩下的事情。

例如：

document.querySelector("#container").onclick = function(event) {
  let target = event.target; // where was the click?

  if (target.id != 'something') return; // not on something? Then we're not interested

  alert('found something'); // highlight it
};

完整的示例 CSS 方式

document.querySelector("#something").onclick = function(){
console.log('found');};
        
    document.querySelector("#button").onclick = function(){
    
    document.querySelector("#something").style.display = 'block';};

<div id='container'>
<div id='something' style='display:none;'>waited forevent<button id='button2' type="button">Alert Me!</button></div>
<button id='button' type="button">Show Me!</button>

</div>

现在 JS 方式可以正常工作

var htmlcode ="<div id='something' style='display:block;'>waited forevent<button id='button2' type='button'>Alert Me!</button></div>";


            
        document.querySelector("#button").onclick = function(){
        
        document.querySelector("#container").innerHTML =htmlcode;
        //you notice we are sort of delegating after the injection. if it was done the CSS way Js will throw error
        document.querySelector("#button2").onclick = function(){
    console.log('found');};
        };

    <div id='container'>
  <button id='button' type="button">Show Me!</button>

    </div>

完整的事件委托

document.querySelector("#container").onclick = function(event) {
  let target = event.target; // where was the click?
  if (target.id != 'button2') return; // not on anything other than inner button

 console.log('found'); // highlight it
};

// delegation happened even before content even existed or Dom knew about it. hence no error

var htmlcode ="<div id='something' style='display:block;'>waited forevent<button id='button2' type='button'>Alert Me!</button></div>";
               
            document.querySelector("#button").onclick = function(){
            
            document.querySelector("#container").innerHTML =htmlcode;
            //you notice no delegation here
         
            };

    <div id='container'>
      <button id='button' type="button">Show Me!</button>

        </div>

结论您走在正确的轨道上，无论哪种方式都是正确的，这完全取决于框架如何执行的场景。关于保持 HTML 和 JS 以及 CSS 分开的争论源于这样一种想法，即如果另一个开发人员要阅读代码，那么它应该是显而易见的，而不需要花费大量时间来弄清楚什么是什么和如何。把它混在一起没有坏处。无论哪种方式，我都这样做。但是，当有两个以上的人参与编码时，必须考虑。当一切都捆绑在一个地方时，如果某些人只是在不了解上下文的情况下更改了某些内容，就会造成混乱。如果一切都来自他们自己的文件，也会发生同样的情况。其次，当您需要更改某些内容时，关注点的彻底分离会有所帮助，因为您不需要弄乱核心 DOM 文档，即 html。这就是为什么 SPA 注意到主文档是极简主义的，因为其余部分来自不同的文件或未捆绑到主代码中的代码，并从这些文件或代码中注入。

所以是的，你的权利，这就是它在主要其余部分的所有特定情况下的处理方式。浏览器中元素的交互性 window 不是 node.js 关注的问题。哪些元素进入浏览器 window 是 node.js 关注的问题，即获取 html 和 js 并将其放入。

如果您需要在许多 html 页面上填充该 JS，则可以通过 node.js 注入浏览器 window 要么制作一个单独的 JS 文件，通过脚本标记或其他方式调用 DOM，然后使用它。同样，这完全取决于场景。

拥有一个包含大 DIV 的字符串并使用 JS 将其注入 html 是一种常见的做法吗

Is it common practice to have a string that holds a large DIV and inject that into html using JS

javascript

html

electron

code-injection