打造基于 XSL 的模板框架-uniapp uview 小程序框架模板

xsl是一种标记语言，表示如何将xml文档的内容装换成另一种形式的文档。通过为xml写xsl来使得xml显示成不同的格式。 XSL 之于 XML ,就像 CSS 之于 HTML。它是指可扩展样式表语言 (EXtensible Stylesheet Language)。这是一种用于以可读格式呈现 XML 数据的语言。　　

上图是本博客的页面布局图，也是最为普通常见的网页布局，具有代表性，这里就是用 XSL 打造这种布局的模板框架。

上图的特点是 Header、Righter、Footer 三个区域是公共区域，几乎所有页面都包含这三个区域。不同页面只在 Main 区域有差异。那么在制作页面时只要编写 Main 区域，其他区域只要包含三个公共区域就算完成页面了。这是正向思维，因为程序里面经常这么干，需要的时候就加载。正向思维只能解决小区域、临时性的加载或调用，无法形成框架。

框架的作用是使页面继承框架，又能重写扩展。既节省时间重用模块，又能体现灵活性。快乐笛子的博客-专注于XML技术与前端开发刚好与上面的分析相反，这里要用到反向思维。编写的页面是框架的一个区域，当前页面是被主框架调用，而不是主动调用其他区域。按照左图所示，先编写框架，包含 Header、Righter、Footer，Main区域的位置留空，调用一个固定名称的 Template，如 Main（类似于C语言的 main 函数）。

主框架文件名为：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>

再进一步抽象，把 Header、Righter、Footer 以及 title 元素（下面需要用到）保存到另一个公共文件中去：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">   
主框架的标题   
</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 只承担了整体排版，定义全局CSS、Javascript 的功能，与任何子区域都无关。其中 Main 区域调用了一个名为 main 的模板。在 mainframe.xsl 与 common.xsl 文档中都没有定义 main 模板，该模板存在于每个页面中，比如列表页的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 区域，列表页   
</XSL:TEMPLATE>   
</XSL:STYLESHEET>

上面有两处地方需要注意，***是必须在 xsl:output 元素之前载入主框架（主框架又载入 common.xsl），其次是此页面默认入口是名为 main 的 template，即不能存在自动匹配的模板( match="/" 从根开始匹配的模板)。list.xsl 中的 main 模板是为主框架准备的。同样，详细页也如此编写，这样就实现了框架继承与区域重用。

页面的标题（title元素）是在mainframe中定义的，但每个详细页的标题都不同，列表页也不同，这就需要重写title模板覆盖mainframe中的默认值。
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 区域，列表页   
</XSL:TEMPLATE>   
<XSL:TEMPLATE name="pagetitle">   
列表页的标题   
</XSL:TEMPLATE>   
</XSL:STYLESHEET>

上面的 pagetitle 模板将会覆盖 common.xsl 中的同名模板。列表页的标题与其他未定义 pagetitle 的页面的标题将不再一致。
注意，必须是使用 xsl:import 元素导进来的模板才可以被覆盖，如果使用 xsl:include ，将产生错误："不能使用相同导入优先权多次定义命名模板"。

【编辑推荐】