對(duì)于網(wǎng)站來(lái)說(shuō)很多頁(yè)面之間都有著大量的共享模塊，如頁(yè)頭，頁(yè)腳和用戶欄等。對(duì)于具備后端視圖引擎的框架來(lái)說(shuō)這些共享都比較容易抽取，如asp.net mvc來(lái)說(shuō)就有統(tǒng)一布局的MasterPage,@Section等功能可以共享視圖模板功能。但對(duì)于HTML就沒(méi)這么幸運(yùn)了,在html文件里并不具備這些功能，所以當(dāng)你用純HTML頁(yè)面來(lái)寫應(yīng)用網(wǎng)站的時(shí)候估計(jì)不得不面對(duì)這些重復(fù)的工作，雖然可以通過(guò)嵌套IFrame的方式來(lái)實(shí)現(xiàn)，不過(guò)這種實(shí)現(xiàn)方式并不理想和友好。
實(shí)際場(chǎng)分析
最近基于自有框架實(shí)現(xiàn)一個(gè)網(wǎng)站，由于框架并不具備后端視圖引擎，這種麻煩事就碰到了...我們先來(lái)看一下實(shí)際情況。
以上兩個(gè)HTML頁(yè)面除了核心部分是獨(dú)有的，其他數(shù)據(jù)塊都是相同。如果沒(méi)有后端視圖引擎你想到怎樣做呢....剛開始每個(gè)地方修改都要同步到其他頁(yè)面。后來(lái)發(fā)現(xiàn)這樣的做法一定會(huì)把自己迫死的。經(jīng)過(guò)一段時(shí)間的思考想到了一個(gè)解決的辦法。
公共模板定義
思考后發(fā)現(xiàn)可以把公共模板抽取到一個(gè)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">網(wǎng)站管理</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">首頁(yè)</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>
通過(guò)template標(biāo)簽來(lái)定義一個(gè)模板塊，然后針對(duì)每個(gè)塊定義一個(gè)唯一ID。可能有些同學(xué)會(huì)問(wèn)template并不是有效的HTML標(biāo)簽，那怎處理里呢？對(duì)的template瀏覽器是不會(huì)處理，但JQuery是可以，說(shuō)到這里相信有此同學(xué)理解原理了。
在HTML中應(yīng)用模板
當(dāng)模塊定義后，那在HTML中怎么引用呢？其實(shí)HTML并不支持這樣的功能，不過(guò)我們可以給HTML定義一些自定義屬性給JQuery解釋，在這里定義了一個(gè)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>
模板定義了，頁(yè)面的HTML也引用了，接下來(lái)就要整合他們。到了這里相信熟悉JQuery的朋友一定想到要怎么做了：）
使用JQuery整合加載
對(duì)于JQuery來(lái)說(shuō)可以把公共模塊頁(yè)加載后轉(zhuǎn)成DOM,然后替換頁(yè)面上定義了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");
});
代碼簡(jiǎn)單有效，把整會(huì)腳本存到一個(gè)文件中，然后添加到頁(yè)中就自動(dòng)加載了.
加載速度問(wèn)題
原本一次就能加載的HTML頁(yè)面，現(xiàn)在還需要Ajax加載不會(huì)導(dǎo)致加載慢了嗎？其實(shí)可以把公共模塊的HTML頁(yè)做一個(gè)本地緩存策略，這樣所有頁(yè)面加載模塊的時(shí)候都能直接從本地拿；由于公共部分抽取出來(lái)，從而讓相關(guān)頁(yè)面的休積變得更小，加載速度更快。
基于純HTML/JS前端開發(fā)優(yōu)勢(shì)
對(duì)于習(xí)慣使用服務(wù)端視圖引擎的朋友來(lái)說(shuō)，完全使用HTML/JS的前端開發(fā)模式可以有點(diǎn)困難。但完全基于HTML/JS的前端開發(fā)有著明顯的優(yōu)勢(shì)，視圖處理不需要服務(wù)解釋大大降低了服務(wù)器的損耗，HTML可以更好地做本地化緩存，還有現(xiàn)在大量的HTML/JS框架讓你在編寫的時(shí)候更輕松簡(jiǎn)單。
總結(jié)
以上所述是小編給大家介紹的傳統(tǒng)HTML頁(yè)面實(shí)現(xiàn)模塊化加載的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
