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

最新推荐文章于 2023-04-19 10:04:13 发布

原创最新推荐文章于 2023-04-19 10:04:13 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种利用jQuery异步加载HTML模块的方法，通过在项目中创建模块化的HTML文件，可以实现公共模块的复用与高效加载，适用于前端开发中的页面组件化管理。

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