避免克隆 HTMLTemplate 来检索 innerHTML

Question

我将所有模板都放在<template>标签中以提高运行时性能(避免渲染(，但我想知道当我需要它们的内容来编译我的下划线模板时，我是否正确使用了它们。我想要的是 DOM 元素的字符串内容，但我似乎无法访问它，而无需从影子 DOM 克隆它。我正在这样做：

function compileTemplate(templateId){
    var el = document.getElementById(templateId);
    var templateMarkup = _.unescape(el.cloneNode(true).innerHTML);
    return compiledTemplate = _.template(templateMarkup);
}

这行得通，但是有没有更有效的方法来避免克隆？

Answer 1

您应该能够直接获取innerHTML字符串而无需克隆：

function compileTemplate(templateId) {
    var el = document.getElementById(templateId);
    var templateMarkup = _.unescape(el.innerHTML);
    return compiledTemplate = _.template(templateMarkup);
}

function compileTemplate(templateId) {
    var el = document.getElementById(templateId);
    console.log( el.innerHTML )
}
function test() {
    compileTemplate('T1')
}

<template id=T1>
  HTML inside
</template>
<button onclick=test()>Compile</button>