如何利用模板将HTML从JavaScript中抽离

利用模板将HTML从JavaScript中抽离是一种良好的开发实践，它可以使代码更易阅读和维护。以下是利用模板将HTML从JavaScript中抽离的完整攻略：

步骤1：创建 HTML 模板

首先，我们需要创建一个 HTML 模板文件。该模板文件应该包含我们希望从 JavaScript 中动态生成的所有 HTML 代码。这样可以帮助我们在将来更容易地修改 HTML 布局和样式。

<!-- 模板文件 template.html -->
<div class="item">
  <h3 class="title"></h3>
  <p class="description"></p>
</div>

步骤2：引入模板文件并加载

接下来，我们需要将 HTML 模板文件引入 JavaScript 文件中。可以使用以下代码加载模板文件：

<!-- JavaScript 文件 -->
<script id="template" type="text/html">
  <!-- 在这里插入你的模板 -->
</script>

<script>
  var template = document.getElementById('template').innerHTML;
</script>

在这个代码片段中，我们创建了一个 script 元素，并将其 type 属性设置为 text/html，以告诉浏览器该元素包含的内容是 HTML 代码。我们也可以使用 data 属性来指定模板文件的 URL，这将使模板的内容从外部文件中加载。

然后，我们使用 JavaScript 提供的 innerHTML 属性将模板文件的内容复制到一个变量中。现在，我们可以使用模板字符串和 JavaScript 变量来创建完整的 HTML 代码。

步骤3：使用模板字符串动态生成 HTML 代码

最后，我们可以使用模板字符串和 JavaScript 变量来动态生成 HTML 代码。以下是一个示例：

<script>
  // 从获取的数据中创建一个 HTML 字符串
  var data = {
    title: '标题',
    description: '描述'
  };

  var html = template.replace('{{title}}', data.title)
                     .replace('{{description}}', data.description);

  // 将 HTML 字符串插入到页面中
  var container = document.getElementById('container');
  container.innerHTML = html;
</script>

在这个代码片段中，我们首先使用 JavaScript 对象模拟一些数据（例如，标题和描述）。然后，我们使用 replace() 方法将这些变量插入到我们的 HTML 模板字符串中。最后，我们使用 innerHTML 属性将该字符串插入到容器元素中。

示例1：使用 jQuery 实现模板

以下是使用 jQuery 实现模板的示例代码：

<!-- 模板文件 template.html -->
<div class="item">
  <h3 class="title"></h3>
  <p class="description"></p>
</div>

<!-- JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    var template = $('#template').html();

    var data = {
      title: '标题',
      description: '描述'
    };

    var html = template.replace('{{title}}', data.title)
                       .replace('{{description}}', data.description);

    $('#container').html(html);
  });
</script>

<!-- 插入容器元素 -->
<div id="container"></div>

在这个示例中，我们使用 jQuery 的 $() 函数来获取模板元素，并将其内容复制到一个变量中。之后，我们使用了 jQuery 的 html() 函数来将动态生成的 HTML 字符串插入到容器元素。

示例2：使用 Underscore 实现模板

以下是使用 Underscore 实现模板的示例代码：

<!-- 模板文件 template.html -->
<div class="item">
  <h3><%= title %></h3>
  <p><%= description %></p>
</div>

<!-- JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script>
  var template = _.template($('#template').html());

  var data = {
    title: '标题',
    description: '描述'
  };

  var html = template(data);

  $('#container').html(html);
</script>

<!-- 插入容器元素 -->
<div id="container"></div>

在这个示例中，我们使用 Underscore 的 _.template() 函数来将模板内容编译为可重复使用的模板函数。然后，我们调用该函数并传入数据对象来生成 HTML 字符串。最后，我们使用 jQuery 的 html() 函数将其插入到容器元素中。