文档章节

在HTML页中面实现模块化加载

泥水佬
 泥水佬
发布于 2018/10/12 18:22
字数 1094
阅读 18
收藏 0

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

实际场分析

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

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

公共模板定义

思考后发现可以把公共模板抽取到一个HTML文件中(文件名就暂定PublicModule.html),如下:

<templates>
    <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

 <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前端开发优势

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

实际应用效果体验

© 著作权归作者所有

共有 人打赏支持
泥水佬

泥水佬

粉丝 72
博文 87
码字总数 57518
作品 7
广州
架构师
私信 提问
Html.BeginForm方法没有生成Form标签的问题

在做一个mvc3项目的时候,发现有的页面的form标签没有生成(用@Html的方法),于是不得不手写原生的form标签,今天决定把问题找一找。 我的页面是这样的,一个layout页,里面有几个RenderSec...

andrewniu
2018/05/31
0
0
JavaScript模块化编程和项目实施心得

一、模块化 同过JavaScript我们可以很方便去去引入js调用其中的方法,但由于JavaScript淡化了类的概念,我们会比较困难去按模块去调用既定已封装好的特定功能的方法。目前关于模块化的规范有...

漂泊者及其影子
2016/03/30
49
0
在Html中使用Requirejs进行模块化开发

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。 如何使用requirejs加载html Reuqirejs有一个...

青夜之衫
2017/12/04
0
0
AdminLTE 中文后台模板

在AdminLTE-2.3.6 原有的基础上,右侧页面改为ajax无刷新加载,增加了后台首页、表单页、列表页等示例页面。 AdminLTE介绍: AdminLTE 是受欢迎的开源的管理仪表盘和控制面板的WebApp模板。它...

lizole
2016/09/23
11
0
简洁后台管理模版

原文地址:简洁后台管理模版 之前给客户开发一个简单的后台管理系统,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又需要有多tab页面切换,于是从我代码库中找到好久前就写过的管理后台,...

Jeff.Zhong
2017/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

matlab-线性代数 根据二次型写矩阵

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclci=input(......

志成就
19分钟前
1
0
Linux常用命令(六)vi 命令

vi 命令 复制,光标所在的这一行 yy 复制,光标所在行开始向下的4行 4yy 粘贴 p 删除(剪切,用p粘贴),光标所在的这一行 dd 删除(剪切),光标所在行,向下2两行 2dd 从光标开始一直...

GritTan
40分钟前
1
0
nginx 找不到pid文件原因及解决办法

2.var/run/nginx.pid文件 首先 var/run这个目录是干嘛用的? 此文件夹包含描述系统启动以来系统信息的数据。此文件夹下的文件必须在启动过程初期清除(删除或归零)。程序可以在/var/run下有...

李佳顺
今天
4
0
【scala】2.控制结构和函数

简介 在Java或者C++中,我们把表达式和语句看做两种不同的东西。表达式有值,而语句执行动作。 在Scala中,几乎所有构造出来的语法结构都是有值的。这个特性使得程序更加的精简,也更易读。 ...

Areya
今天
5
0
Java中的并发工具类(CountDownLatch、CyclicBarrie、Exchanger)

在JDK的并发包里提供了很多有意思的并发工具类。CountDownLatch、CyclicBarrier和Semaphore 工具类提供了一种并发流程控制的手段,Exchanger 工具类则提供了在线程间交换数据的一种手段。 1....

孟飞阳
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部