HTML页面 实现模块化加载 异步加载css js 解决方案

html公共模块加载 利用template 使用jq加载，浏览器不会识别但是jquery会代码如下：

 

首先我们在项目里创建一个module.html,内容如下

<templates>
    <template id="header">
        这里是你想要公共加载的内容 
         //<link src = 'index.css'>
        //<script src="index.js"></script>
    </template>
<templates>

 

 

这里是你需要引入页面内容创建一个slot的模板id

        <div class="container" slot="Module">

        </div>

这里利用jquery异步get请求module.html页面到这里你就会发现公共部分提取出来并加载到你所需要的页面啦

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("Module.html");
});

如有疑问 https://lg1012.cn