传统HTML页面实现模块化加载的方法

<templates>
    <template id="header">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">.Net Library</a>
        </div>
        <div class="navbar-collapse collapse" role="navigation">
            <div style="margin-:15px;margin-left:120px; position:absolute;"><span style="color:white;padding-:20px;">XXXXX</span></div>
            <ul class="nav navbar-nav"></ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/Blog.html">博客</a></li>
                <li><a href="https://github./IKende/FastHttpApi" target="_blank">github.</a></li>
                <li><a href="/admin/index.html">网站管理</a></li>
            </ul>
        </div>
    </template>
    <template id="doc_tags_navbar">
        <div class="container-fluid" style="padding:0px;">
            <ul class="nav navbar-nav btn-group-sm" id="tagbar">
                <li><a style="font-weight:bold; padding-bottom:6px;padding-:6px;" href="/index.html">首页</a></li>
                <li v-for="item in Data"><a v-bind:title="item.Remark" style="font-weight:bold; padding-bottom:6px;padding-:6px;" v-bind:href="['/index.html?tag='+item.ID]">{{item.Title}}</a></li>
            </ul>
        </div><!-- /.container-fluid -->
        <script>
            var tagbarControl;
            tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } });
            async function ListDocTags() {
                var result = await $ListDocTags();
                tagbarControl.Data = result.Data;
            }
            ListDocTags();
        </script>
    </template>
<templates>

  <div class="navbar navbar-inverse navbar-fixed-">
        <div class="container" slot="header">

        </div>
    </div>
 <nav class="navbar navbar-default" style="padding:0px;margin:0px;min-height:0px;" slot="doc_tags_navbar">
                </nav>

function moduleLoad(url) {
    $.get(url, function (result) {
        var html = $(result);
        var __templates = html;
        $("[slot]").each(function () {
            var id = $(this).attr('slot');
            var body = $(__templates).find('#' + id).html();
            $(this).html(body);
        });
    });
}
$(document).ready(function () {
    moduleLoad("/PublicModule.html");
});