如何将Handlebars模板分离到独立文件并加载到HTML中？

目前我把所有Handlebars模板都和站点HTML文件放在一起，实现代码如下：

JavaScript 代码 #

var header_template = $("#header-template").html();
var content_template = $("#content-template").html();
var footer_template = $("#footer-template").html();

$(document).ready(function() {
    // Footer
    handlebars = Handlebars.compile(footer_template);

    var content_rendered = handlebars({footer});
    $('.footer-target').replaceWith(content_rendered);

    // Header
    handlebars = Handlebars.compile(header_template);

    var content_rendered = handlebars({header});
    $('.header-target').replaceWith(content_rendered);

    // Content
    handlebars = Handlebars.compile(content_template);

    var content_rendered = handlebars();
    $('.content-target').replaceWith(content_rendered);

});

HTML 代码 #

<!-- ... head and stuff ... -->
    <body>
        <div class="wrapper">
            <div class="header-target"></div>
            <div class="content">
                <div class="content-target"></div>
            </div>
            <div class="footer-target"></div>
        </div>
    </body>

    <script id="footer-template" type="text/x-handlebars-template">
        <div class="footer font-small d-flex justify-content-center">

            <div class="text-center" style="min-width: 100%">
                {{#each footer.content}}{{this}}{{/each}}
            </div>

        </div>
   </script>

   <script id="header-template" type="text/x-handlebars-template">
      <div class="header">

            <div class="headerImg"></div>
            <ul class="nav">
                {{#each header.items}}
                <li class="nav-item">
                    <a class="nav-link">{{this}}</a>
                </li>
                {{/each}}
            </ul>

        </div>
   </script>
   
   <script id="content-template" type="text/x-handlebars-template">
       <!-- content stuff -->
   </script>

现在这个实现能正常运行，但随着模板数量增多、体积变大，HTML文件的可读性越来越差。请问能不能把<script type="text/x-handlebars-template">标签里的内容存到独立文件中，用类似<script src="footer-template.htm">的方式加载到HTML里？

当然可以，有两种主流方式实现模板文件独立存放：

1. 用AJAX异步加载模板文件 #

把每个模板单独存成.hbs或.html文件（比如header-template.hbs、footer-template.hbs），通过AJAX请求获取模板内容后再编译渲染。

修改后的JavaScript代码示例 #

$(document).ready(function() {
    // 封装模板加载渲染函数
    function loadAndRenderTemplate(url, targetSelector, data = {}) {
        $.get(url, function(templateHtml) {
            var compiledTemplate = Handlebars.compile(templateHtml);
            var renderedContent = compiledTemplate(data);
            $(targetSelector).replaceWith(renderedContent);
        });
    }

    // 加载并渲染各个模板
    loadAndRenderTemplate('footer-template.hbs', '.footer-target', {footer});
    loadAndRenderTemplate('header-template.hbs', '.header-target', {header});
    loadAndRenderTemplate('content-template.hbs', '.content-target');
});

独立模板文件示例（header-template.hbs） #

<div class="header">
    <div class="headerImg"></div>
    <ul class="nav">
        {{#each header.items}}
        <li class="nav-item">
            <a class="nav-link">{{this}}</a>
        </li>
        {{/each}}
    </ul>
</div>

注意：本地开发时直接打开HTML文件可能触发跨域限制，建议用本地服务器（如Node.js的http-server、XAMPP）运行项目，确保服务器能正确响应静态模板文件请求。

2. 预编译Handlebars模板 #

如果追求性能（避免客户端编译开销），可以用Handlebars官方预编译工具，把模板提前编译成JS文件，直接在HTML中引入使用。

步骤： #

1. 安装预编译工具：npm install -g handlebars
2. 预编译模板文件：handlebars footer-template.hbs -f footer-template.js
3. 在HTML中引入编译后的JS：<script src="footer-template.js"></script>
4. 在JavaScript中直接调用预编译模板：

$(document).ready(function() {
    // 预编译模板会注册到Handlebars.templates对象下
    var renderedFooter = Handlebars.templates['footer-template']({footer});
    $('.footer-target').replaceWith(renderedFooter);

    // 同理处理其他模板
    var renderedHeader = Handlebars.templates['header-template']({header});
    $('.header-target').replaceWith(renderedHeader);
});

这种方式既简化了HTML结构，又能提升页面加载速度，适合生产环境使用。

内容的提问来源于stack exchange，提问作者alex