打造基于 XSL 的模板框架
xsl是一種標(biāo)記語(yǔ)言，表示如何將xml文檔的內(nèi)容裝換成另一種形式的文檔。通過(guò)為xml寫(xiě)xsl來(lái)使得xml顯示成不同的格式。 XSL 之于 XML ,就像 CSS 之于 HTML。它是指可擴(kuò)展樣式表語(yǔ)言 (EXtensible Stylesheet Language)。這是一種用于以可讀格式呈現(xiàn) XML 數(shù)據(jù)的語(yǔ)言。
上圖是本博客的頁(yè)面布局圖，也是最為普通常見(jiàn)的網(wǎng)頁(yè)布局，具有代表性，這里就是用 XSL 打造這種布局的模板框架。
上圖的特點(diǎn)是 Header、Righter、Footer 三個(gè)區(qū)域是公共區(qū)域，幾乎所有頁(yè)面都包含這三個(gè)區(qū)域。不同頁(yè)面只在 Main 區(qū)域有差異。那么在制作頁(yè)面時(shí)只要編寫(xiě) Main 區(qū)域，其他區(qū)域只要包含三個(gè)公共區(qū)域就算完成頁(yè)面了。這是正向思維，因?yàn)槌绦蚶锩娼?jīng)常這么干，需要的時(shí)候就加載。正向思維只能解決小區(qū)域、臨時(shí)性的加載或調(diào)用，無(wú)法形成框架。
框架的作用是使頁(yè)面繼承框架，又能重寫(xiě)擴(kuò)展。既節(jié)省時(shí)間重用模塊，又能體現(xiàn)靈活性。快樂(lè)笛子的博客-專注于XML技術(shù)與前端開(kāi)發(fā)剛好與上面的分析相反，這里要用到反向思維。編寫(xiě)的頁(yè)面是框架的一個(gè)區(qū)域，當(dāng)前頁(yè)面是被主框架調(diào)用，而不是主動(dòng)調(diào)用其他區(qū)域。按照左圖所示，先編寫(xiě)框架，包含 Header、Righter、Footer，Main區(qū)域的位置留空，調(diào)用一個(gè)固定名稱的 Template，如 Main（類似于C語(yǔ)言的 main 函數(shù)）。
主框架文件名為：mainframe.xsl，主要代碼如下：
- <html>
- <head>
- <title>主框架</title>
- </head>
- <body>
- <div class="box">
- <div class="header">Header</div>
- <div class="middle">
- <div class="main">
- <xsl:call-template name="main" />
- </div>
- <div class="righter">Righter</div>
- </div>
- <div class="footer">Footer</div>
- </div>
- </body>
- </html>
再進(jìn)一步抽象，把 Header、Righter、Footer 以及 title 元素（下面需要用到）保存到另一個(gè)公共文件中去：common.xsl：
- <XSL:TEMPLATE name="header">
- Header
- </XSL:TEMPLATE>
- <XSL:TEMPLATE name="righter">
- Righter
- </XSL:TEMPLATE>
- <XSL:TEMPLATE name="footer">
- Footer
- </XSL:TEMPLATE>
- <XSL:TEMPLATE name="pagetitle">
- 主框架的標(biāo)題
- </XSL:TEMPLATE>
mainframe.xsl 修改為：
- <xsl:import href="common.xsl" />
- ...
- <html>
- <head>
- <title><xsl:call-template name="pagetitle" /></title>
- </head>
- <body>
- <div class="box">
- <div class="header">
- <xsl:call-template name="header" />
- </div>
- <div class="middle">
- <div class="main">
- <xsl:call-template name="main" />
- </div>
- <div class="righter">
- <xsl:call-template name="righter" />
- </div>
- </div>
- <div class="footer"><xsl:call-template name="footer" /></div>
- </div>
mainframe.xsl 只承擔(dān)了整體排版，定義全局CSS、Javascript 的功能，與任何子區(qū)域都無(wú)關(guān)。其中 Main 區(qū)域調(diào)用了一個(gè)名為 main 的模板。在 mainframe.xsl 與 common.xsl 文檔中都沒(méi)有定義 main 模板，該模板存在于每個(gè)頁(yè)面中，比如列表頁(yè)的XSL主要代碼如下（文件名為list.xsl）：
- <XSL:STYLESHEET xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
- <XSL:IMPORT href="mainframe.xsl" />
- <XSL:OUTPUT doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" encoding="utf-8" method="html" />
- <XSL:TEMPLATE name="main">
- 此處是 Main 區(qū)域，列表頁(yè)
- </XSL:TEMPLATE>
- </XSL:STYLESHEET>
上面有兩處地方需要注意，***是必須在 xsl:output 元素之前載入主框架（主框架又載入 common.xsl），其次是此頁(yè)面默認(rèn)入口是名為 main 的 template，即不能存在自動(dòng)匹配的模板( match="/" 從根開(kāi)始匹配的模板)。list.xsl 中的 main 模板是為主框架準(zhǔn)備的。同樣，詳細(xì)頁(yè)也如此編寫(xiě)，這樣就實(shí)現(xiàn)了框架繼承與區(qū)域重用。
頁(yè)面的標(biāo)題（title元素）是在mainframe中定義的，但每個(gè)詳細(xì)頁(yè)的標(biāo)題都不同，列表頁(yè)也不同，這就需要重寫(xiě)title模板覆蓋mainframe中的默認(rèn)值。
list.xsl 文件如下：
- <XSL:STYLESHEET xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
- <XSL:IMPORT href="mainframe.xsl" />
- <XSL:OUTPUT doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" encoding="utf-8" method="html" />
- <XSL:TEMPLATE name="main">
- 此處是 Main 區(qū)域，列表頁(yè)
- </XSL:TEMPLATE>
- <XSL:TEMPLATE name="pagetitle">
- 列表頁(yè)的標(biāo)題
- </XSL:TEMPLATE>
- </XSL:STYLESHEET>
上面的 pagetitle 模板將會(huì)覆蓋 common.xsl 中的同名模板。列表頁(yè)的標(biāo)題與其他未定義 pagetitle 的頁(yè)面的標(biāo)題將不再一致。
注意，必須是使用 xsl:import 元素導(dǎo)進(jìn)來(lái)的模板才可以被覆蓋，如果使用 xsl:include ，將產(chǎn)生錯(cuò)誤："不能使用相同導(dǎo)入優(yōu)先權(quán)多次定義命名模板"。
【編輯推薦】
