传统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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 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 图像函数大举例(非原创)
2009/06/20 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
初品cakephp 入门基础
2012/02/16 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
Javascript的this详解
2019/03/23 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python实现按中文排序的方法示例
2018/04/25 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Django 路由层URLconf的实现
2019/12/30 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
化工专业大学生职业生涯规划书
2014/01/14 职场文书
国庆节活动总结
2014/08/26 职场文书
垂直极限观后感
2015/06/08 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
自信主题班会
2015/08/14 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android