傳統HTML頁面實作模組化載入的方法

對於網站來說很多頁面之間都有大量的共享模組，如頁頭，頁腳和用戶欄等。對於具備後端視圖引擎的框架來說這些共享都比較容易抽取，如asp.net mvc來說就有統一佈局的MasterPage,@Section等功能可以共享視圖模板功能。但對於HTML就沒這麼幸運了,在html文件裡並不具備這些功能，所以當你用純HTML頁面來寫應用網站的時候估計不得不面對這些重複的工作，雖然可以通過嵌套IFrame的方式來實現，不過這種實現方式並不理想友善。

最近基於自有框架實現一個網站，由於框架並不具備後端視圖引擎，這種麻煩事就碰到了...我們先來看看實際情況。

以上兩個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定義一些自訂屬性給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來說可以把公共模組頁載入後轉成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可以更好地做本地化緩存，還有現在大量的HTML/JS框架讓你在編寫的時候更輕鬆簡單。

以上所述是小編給大家介紹的傳統HTML頁面實作模組化載入的方法，希望對大家有幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！