Question

我在jQuery代码中有一些HTML模板，我用它们用JS生成一些新元素。目前，我将它们保留在页面底部

<script type="text/html" id="ID_to_refer_from_jQuery">...HTML code here...</script>

我觉得这不是最好的方法，因为其中一些非常大，有没有办法将字符串HTML模板存储在HTML文件之外？

Answer 1

将它们放在另一个文件夹中并使用AJAX调用它们。你不想拥有一个巨大的文件。相反，利用组织文件夹系统来保持项目的有序性。

示例文件夹结构

/root
  index.html

  /templates
    navigation.html
    footer.html
    ...

加载它们

$("header").load("templates/navigation.html");

Answer 2

执行此操作的最佳方法是使用HTML5 template feature，但不幸的是，Internet Explorer 10或11不支持它。以下是使用它的示例：

<template id="simple">
    <style>
        span { color: purple; }
    </style>

    <img src="http://placehold.it/50x50" />
    <span>Hello World!</span>

    <script>
        function boom(){
            alert("BOOM!");
        }
        boom();
    </script>
</template>

function addSimple(){
    // Grab our template
    var t = document.querySelector('template#simple').content;

    // Optional -- Modify template

    // Clone and add
    var clone = document.importNode(t, true);
    document.getElementById("simple-target").appendChild(clone);
}

（Source of this example）

与此同时，我见过的最常见的方法是将HTML放在这样的JavaScript变量中：

var html = [
'<div>',
'    <h1>Example Domain</h1>',
'    <p>This domain is established to be used for illustrative examples in documents. You may use this',
'    domain in examples without prior coordination or asking for permission.</p>',
'    <p><a href="http://www.iana.org/domains/example">More information...</a></p>',
'</div>'
].join('');

如果您有一大块HTML，甚至有an online tool会自动将其格式化为JavaScript变量。

我应该在哪里存储js模板？

2 个答案: