傳統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並不支援這樣的功能,不過我們可以給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/JS前端開發優勢
對於習慣使用服務端檢視引擎的朋友來說,完全使用HTML/JS的前端開發模式可以有點困難。但完全基於HTML/JS的前端開發有著明顯的優勢,檢視處理不需要服務解釋大大降低了伺服器的損耗,HTML可以更好地做本地化快取,還有現在大量的HTML/JS框架讓你在編寫的時候更輕鬆簡單。