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


Posted in HTML / CSS onOctober 15, 2018

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

实际场分析

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

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

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

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

公共模板定义

思考后发现可以把公共模板抽取到一个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页面实现模块化加载的方法

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

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

总结

以上所述是小编给大家介绍的传统HTML页面实现模块化加载的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 #HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 #HTML / CSS
HTML高亮关键字的实现代码
Oct 22 #HTML / CSS
详解rem 适配布局
Oct 31 #HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 #HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
PHP实现文件上传与下载
2020/08/28 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
火车的故事教学反思
2014/02/11 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
城管大队整治方案
2014/05/06 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL