javascript - 避免克隆 HTMLTemplate 来检索 innerHTML？

Question

我在 <template> 中拥有所有模板标签来提高运行时性能(避免渲染)，但我想知道当我需要它们的内容来编译我的 Underscore 模板时我是否正确使用它们。 我想要 的是 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>