在前端开发中，我们经常会使用下划线（underscore）这个库来处理数据和编写模板。但是，在一些特殊的情况下，使用下划线提供的内嵌模板可能无法满足需求，这时候我们可以使用“下划线的外部模板”。
什么是下划线的外部模板？
在下划线中，一个模板被视为字符串，它可以与代码混合在一起。但是，在某些情况下，我们需要从外部文件加载模板，而不是将其直接写入JavaScript代码中。
下划线的外部模板提供了一种解决方案。它允许你将模板文件放到独立的HTML文件中，并使用ajax请求加载这些文件中的模板。
如何使用下划线的外部模板？
首先，我们需要创建一个HTML文件，它包含我们的模板。比如，我们创建一个名为“template.html”的文件，其中包含以下内容：
<script type="text/template" id="my-template"> <h1><%= title %></h1> <p><%= content %></p> </script>
接下来，我们需要在我们的JavaScript代码中引用这个模板。我们使用jQuery发送一个ajax请求来获取文件内容，然后使用underscore的_.template方法将其编译成可执行函数：
$.get('template.html', function(data) {
var template = _.template($(data).html());
});最后，我们可以使用编译后的模板函数来渲染数据：
var data = { title: 'Hello', content: 'World!' };
var rendered = template(data);
$('body').append(rendered);下划线的外部模板的优点
使用下划线的外部模板有以下几个优点：
更好的组织性：将模板文件放到独立的HTML文件中，可以帮助我们更好地组织代码。
更易于维护：当我们需要更新模板时，只需要修改HTML文件即可，而不需要修改JavaScript代码。
减少代码大小：将模板从JavaScript代码中分离出来，可以减少代码大小，提高网页加载速度。
总结
在特定的情况下，使用下划线的内嵌模板可能无法满足需求。这时候，我们可以使用下划线的外部模板来加载独立的HTML文件中的模板。这种方法可以帮助我们更好地组织和维护代码，并且可以减少代码大小，提高网页加载速度。
示例代码
template.html:
<script type="text/template" id="my-template"> <h1><%= title %></h1> <p><%= content %></p> </script>
JavaScript代码:
$.get('template.html', function(data) {
var template = _.template($(data).html());
var data = { title: 'Hello', content: 'World!' };
var rendered = template(data);
$('body').append(rendered);
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10187
