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

  发布时间2018-10-15 15:16:25   作者佚名   我要评论

这篇文章主要介绍了传统HTML页面实现模块化加载的相关知识非常不错具有一定的参考借鉴价值 ,需要的朋友可以参考下

对于网站来说很多页面之间?#21152;?#30528;大量的共享模块如页头页脚和用户栏等对于具备后端视?#23478;?#25806;的框架来说这些共享都比较容易抽取如asp.net mvc来说就有统一布局的MasterPage,@Section等功能可以共享视图模板功能但对于HTML就没这么?#20197;?#20102;,在html文件里并不具备这些功能所以当你用纯HTML页面来写应用网站的时候估计不得不面对这些重复的工作虽然可以通过嵌套IFrame的方式来实现不过这种实现方式并不理想和友好

实际场分析

最近基于自有框架实现一个网站由于框架并不具备后端视?#23478;?#25806;这种麻烦事就碰到了...我们先来看一下实际情况

以上两个HTML页面除了核心部分?#23884;?#26377;?#27169;?#20854;他数据块都是相同如果没有后端视?#23478;?#25806;你想到怎样做呢....刚开始每个地方修改?#23478;?#21516;步到其他页面后来发现这样的做法一定会把自己迫死的经过一段时间的思考想到了一个解决的办法

公共模板定义

思考后发现可以把公共模板抽取到一个HTML文件中文件名就暂定PublicModule.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-top:15px;margin-left:120px; position:absolute;"><span style="color:white;padding-top: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.com/IKende/FastHttpApi" target="_blank">github.com</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-top: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-top: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>

 

通过template标签来定义一个模板块然后针对每个块定义一个唯一ID可能有些同学会问template并不是有效的HTML标签那怎处理里呢对的template浏览器是不会处理但JQuery是可以说到这里相信有此同学理解原理了

在HTML中应用模板

当模块定义后那在HTML中怎么引用呢其实HTML并不支持这样的功能不过我们可以给HTML定义一些自定义属性给JQuery解释在这里定义了一个slot属性用于指定模板ID

  <div class="navbar navbar-inverse navbar-fixed-top">
        <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>

模板定义了页面的HTML也引用了接下来就要整合他们到了这里相信熟悉JQuery的朋友一定想到要怎么做了

使用JQuery整合加载

对于JQuery来说可以把公共模块页加载后转成DOM,然后替换页面上定义了slot的元素

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");
});

代码简单有效把整会脚本存到一个文件中然后添加到页中就自动加载了.

加载速度问题

原本一次就能加载的HTML页面现在还需要Ajax加载不会导致加载慢了吗其实可以把公共模块的HTML页做一个本地缓存策略这样所有页面加载模块的时候都能直接从本地拿由于公共部分抽取出来从而让相关页面的休积变得更小加载速度更快

基于纯HTML/JS前端开发优势

对于习惯使用服务端视?#23478;?#25806;的朋友来说完全使用HTML/JS的前端开发模式可以有点困难但完全基于HTML/JS的前端开发有着明显的优势视图处理不需要服务解释大大降低了服务器的损?#27169;HTML可以更好地做本地化缓存还有现在大量的HTML/JS框架让你在编写的时候更轻松简单
 

总结

以上所述是小编给大家介绍的传统HTML页面实现模块化加载的方法希望?#28304;?#23478;有所帮助如果大家有任?#25105;?#38382;欢迎给我留言小编会及时回复大家?#27169;?/p>

相关文章

最新评论

35ѡ7