首页 > 问答 > 正文

javascript - HTML 文件怎么从外部调入 HTML 模板（如头部，页尾这些公共的部分）？

最近项目要做一个移动web页面项目，很多模版需要公用，由于每个页面都引用相同大量代码不美观而且修改起来非常不方便；不依赖后台有什么办法；

阿神2818 天前1362

全部回复(17)我来回复

阿神2017-04-11 13:32:46

可以用前端的模板语言

也可以自己去写点简单的举个栗子重点是思想

公共header headerTpl.js

<header>
    {{title}}
</header>

html

<html>
    <head>
        <script src="./headerTpl.js" type="text/template" id="J_headerTpl"></script>
    </head>
    <body>
        <p class="container J_container">
            {{{header}}}
        </p>
        
        <script src="zepto.js"></script>
        <script>
            var title = "哈哈";
            var headerTpl = $('#headerTpl').html();
            var container = $('.J_container').html();
            
            headerTpl = headerTpl.replace('{{title}}', title);
            
            container = container.replace('{{{header}}}', headerTpl);
        </script>
    </body>
</html>

感觉有点别扭, 如果是服务端渲染的话用服务端的模板引擎也是可以把公共部分抽离的.