如何在 vanilla JS 中使用 html（模板）文件作为 js 变量

Question

通常我们可以编写js代码将模板分配给这样的变量；

var tmpl = '<div>...</div>'

如果我在不同的 html 文件中引入了 html 模板，我们可以直接在 js 文件中导入并加载该（dom）文件作为变量吗？ 我有多个带有各自模板的 html 文件的要求，并且我必须在 js 变量中获取该模板并动态加载它。

Answer 1

当然：

let variable;
fetch('/file/link.html').then(r => r.text()).then(t => variable = t) ;

您最好只在 then 函数中使用模板，而不是将其分配给它之外的变量。原因是您可以在变量设置之前尝试使用它。

更直接的替代语法是 async/await；但这没有承诺得到广泛支持。