实际是XSLT 的解析脚本,在IE和FireFox 中都可以良好的运行!

1. 源代码

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:function="http://www.infopro.cn/epservernamespace"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
>
<xsl:template match="/">
<html>
<head>
<!--"""
StatCVS 分析结果XML 快速XSLT模板
Zoomq::041227 使用 CSS+JS 进行点击支持
$Id: weeklystat.xsl,v 1.5 2005/01/04 10:34:45 zhouqi Exp $
"""-->
<title>新浪·研发·邮件-CVS周活动统计 @ FreeBSD+Python+XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="sinaeye.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript" > 
//o=document.getElementById('xxx');o.style.display=o.style.display=='none' ? '' : 'none'
function _showDIV(divID){
    var _obj = document.getElementById(divID);
    //alert(divID+"\n"+_obj);
    _obj.style.display = (_obj.style.display=='none')? '' : 'none';    
    return;
}
</script>
</head>
<body  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<xsl:for-each select="root">
<xsl:for-each select="week">
<h1 style="cursor : hand">
    <xsl:attribute name="onclick">
    _showDIV("stat-<xsl:value-of select="@date" />");
    </xsl:attribute>
CVS活动周分析 截止日期<xsl:value-of select="@date" />
</h1>
<ul>
    <li>总更新文件数:   <xsl:value-of select="@files" />
        </li>
    <li>总提交修改数:   <xsl:value-of select="@commits" />
        </li>
    <li>总涉及码行数:   <xsl:value-of select="@lines" />
        </li>
    <li>
    <div style="border : 1px dotted #ede;
                display : none;">
            <xsl:attribute name="id">stat-<xsl:value-of select="@date" /></xsl:attribute>
    <ul>
    <xsl:for-each select="cvs">
    <h3 style="cursor : hand">
    <xsl:attribute name="onclick">
    _showDIV("cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" />");
    //alert("cvs-<xsl:value-of select="@name" />");
    </xsl:attribute>
    <xsl:value-of select="@name" /> 库 中:</h3>
    <li>总更新文件数:   <xsl:value-of select="@files" />
        </li>
    <li>总提交修改数:   <xsl:value-of select="@commits" />
        </li>
    <li>总涉及码行数:   <xsl:value-of select="@lines" />
    </li>
    <li>
        <ul>
        <div style="border : 0px dotted #993300;
            display : none;
            background-color : #336699;
            color:#fff;">
        <xsl:attribute name="id">cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" /></xsl:attribute>
        <xsl:for-each select="module">
        <h5>模块 <xsl:value-of select="@name" /> 更新细节:</h5>
            <li>更新文件数:   <xsl:value-of select="@files" />
                </li>
            <li>提交修改数:   <xsl:value-of select="@commits" />
                </li>
            <li>涉及码行数:   <xsl:value-of select="@lines" />
            </li>            
        </xsl:for-each>
        </div>
        </ul>
    </li>
    </xsl:for-each>
    </ul>
    </div>
    </li>
    </ul>
</xsl:for-each><!--week loop-->
</xsl:for-each><!--root-->
<!-- end of Page-->
</body>
</html>
</xsl:template>
</xsl:stylesheet>

2. 要说

哈哈哈!老本行!快速的实现!

2.1. XSL

  • 解析XML最自然的方式!
  • 简要的算子介绍:

    1. <xsl:for-each select="root">

      • for-each 循环匹配,找所有的root 结点!
      • 可以使用 XPath 声明
        1. 比如说select="//week" 就是要搜索所有层次中的week 结点

        2. 比如说select="week[@name='foo']" 就是要搜索当前层次中有name属性值为"foo"的week节点!

        3. 比如说select="/root/week/module" 绝对路径,标识,搜索所有 root中的week中的 module 结点

    2. <xsl:value-of select="@files" />

      • 取值处理 也是 XPath 的声明
        1. 比如说select="." 取当前结点的文本

        2. 比如说select="@files" 取当前结点的files属性值

    3. <xsl:attribute name="id">cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" /></xsl:attribute>

      • attribute 附加属性处理
        • 以上是为当前的HTML 之 <div> 层结点附加 id 属性

        • 运行结果等于
        • <div id="解析出的XML信息组合为的值 cvs-时间-当前模块名">

  • 其实就这三个动作就足以完成 99%的解析任务了!

2.2. XSLT

  • 这里解析脚本是声明为 XSLT的!
  • <xsl:stylesheet 
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:function="http://www.infopro.cn/epservernamespace"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt">
     
  • XSLT 是升级版本的XSL 脚本,极大的扩展了一些处理
  • 比如说,可以自动识别奇偶来进行相应处理:
  • <xsl:for-each select="ContentList"> 
        <div class="slotBody"><xsl:if test="position() mod 2 = 0">
          <xsl:attribute name="id">even</xsl:attribute></xsl:if>
          ...
     

    -- position() mod 2 = 0 计算当前结点在集合中的位置,来动态的设置CSS,实现交错的视觉效果

2.3. JS

  • <script language="JavaScript" >  
    //o=document.getElementById('xxx');o.style.display=o.style.display=='none' ? '' : 'none'
    function _showDIV(divID){
        //alert(divID);
        var _obj = document.getElementById(divID);
        //alert(divID+"\n"+_obj);
        _obj.style.display = (_obj.style.display=='none')? '' : 'none';    
        return;
    }
    </script>
  • 从尝试中可以看到IE 与 Mozilla 系统的兼容处理
  • HTML dom 的解析,两者有共同的 getElementById() 函式!
    • 只要输出的HTML相配合,为每一层次的统计信息套上有唯一性的ID 的div
    • 就可以在适当的地方添加onClick 点击行为,来展开|关闭 层,实现页面的友好动态效果!!!

2.4. CSS

  • 不用多说!一切感观的控制都靠她了!
  • /style.css -- 也是基本通用的CSS框架式脚本


-- ZoomQuiet [2005-01-05 11:27:12]