拥有一个包含大 DIV 的字符串并使用 JS 将其注入 html 是一种常见的做法吗
Is it common practice to have a string that holds a large DIV and inject that into html using JS
在 JS 中将大型 div 树作为字符串存储并在需要时使用 .innerHTML 变量将其插入 HTML 是一种常见的做法吗?例如,我需要在用户单击按钮时显示一个表单。目前,我将表单的 HTML 作为字符串保存在 javascript 文件中,当用户单击该按钮时,该字符串将被注入到主 HTML 文件中。这是解决此类问题的方法还是有更好的 solution/algorithm?我正在尝试使用电子制作本机应用程序。我不得不反复做类似的操作,而我的JS文件主要是字符串。是否有解决此问题的框架?谢谢!
好的,我将从讨论的角度来解决这个问题。
给定:
- 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,然后使用它。同样,这完全取决于场景。
在 JS 中将大型 div 树作为字符串存储并在需要时使用 .innerHTML 变量将其插入 HTML 是一种常见的做法吗?例如,我需要在用户单击按钮时显示一个表单。目前,我将表单的 HTML 作为字符串保存在 javascript 文件中,当用户单击该按钮时,该字符串将被注入到主 HTML 文件中。这是解决此类问题的方法还是有更好的 solution/algorithm?我正在尝试使用电子制作本机应用程序。我不得不反复做类似的操作,而我的JS文件主要是字符串。是否有解决此问题的框架?谢谢!
好的,我将从讨论的角度来解决这个问题。 给定:
- 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,然后使用它。同样,这完全取决于场景。