對於網站來說很多頁面之間都有着大量的共享模塊，如頁頭，頁腳和用戶欄等。對於具備後端視圖引擎的框架來說這些共享都比較容易抽取，如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框架讓你在編寫的時候更輕鬆簡單。