RAW JS - 如何处理JS文件中的大HTML代码

Question

我正在寻找一种最简洁的方法来处理原始js中的大块dom节点而不使用任何库。我知道模板文字，但在js文件中添加如此多的HTML以及其中的其他函数会使代码看起来很糟糕。有关在SPA上处理html而不加载外部HTML文件的任何建议吗？

我想出了一个想法，但我认为它正在创建其他人可能无法理解的复杂代码（尽管很简单）。

在下面给出的屏幕截图中，我创建了一个函数，它接受数据作为参数，并根据传入的内容返回结果。

• 它需要您要生成的代码的名称
• 它需要一个用于样式的类名（css）
• 第三个参数接受函数或字符串/模板

我将此函数保存在变量中，因此也无需定义从此函数生成的任何HTML id。

现在，在第三个参数中，我可以再次传递相同的函数来获取另一组DOM元素，并且可以根据需要进行深度嵌套。我可以包含文字并使用API​​，也可以包含其他功能。

然而，我需要一些专家眼睛来看看它，让我知道这是更好的方式还是更复杂的方式。这段代码可能看起来很简单，但我们正在谈论用它构建繁重的SPA和嵌套。

以下是结果的屏幕截图：

感谢您的建议和反馈。负面反馈将受到高度赞赏。

-Rehan Haider