Question

长话短说，这对我来说似乎太不可思议了（不是实际代码，而是编写方式）：

var B_ProgressBar = '<span style="border-style:solid;border-width:1px;background-color:#FFFFFF;width:100px;display:inline-block;" onmouseover="PBtext'
+ int + '.innerHTML=\'' + chaptersremaining + "/" + chapterstotal + '\';PBgreen' + int + '.style.width=\'' + chppercent + '%\'" onmouseout="PBtext'
+ int + '.innerHTML=\'' + Npercentage + '%\';PBgreen' + int + '.style.width=\'' + Npercentage + '%\'"><span id="PBgreen' + int
+ '" style="background-color:#01CA24;width:' + Npercentage + '%;display:inline-block;"><span id="PBtext' + int + '" style="display:inline-block;">'
+ Npercentage + '%</span></span></span>';

很多+和许多转义的引号。

我来自Java世界，在这里，过度使用字符串连接通常是您想要做的最后一件事。

但这是我能想到的唯一解决方案。我知道AngularJS和jQuery之类的框架可以使用模板消除此类令人讨厌的代码中的麻烦，并注入适当的代码，而不必担心在某个时候缺少尖尖的括号。

JS是否具有一些内置功能来构建HTML块而无需借助第三方库？类似于“超文本生成器”，它允许将几个参数传递到掩码中，并且该函数吐出一个不错的，随时可以使用div块的东西。

考虑用C语言为SQL或printf（）准备语句。

Answer 1

答案是肯定的。 DOM（文档对象模型）是专门用于此目的的API。

第一步，请研究以下功能：

这些将允许您创建HTML元素，并将它们附加到DOM。

有关 DOM（Web开发中必须理解的重要主题）的更多信息，请阅读以下内容： https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

最后一点，如果您想深入分析JS中的API的工作原理，我建议阅读W3 Schools上的MDN！

Answer 2

JavaScript支持Template Literals：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

我倾向于使用DOM操纵以及使用createElement和朋友，而不是生成原始HTML。

在JavaScript中建立HTML的最佳做法

2 个答案: