第6章 XML文档数据格式创新设计

6.1 设计需求

给定如下传统格式XML文档1：

<?xml version="1.0" encoding="utf-8"?>
<books>
    <book>
        <ISBN>8475484848</ISBN>
        <title>XML技术</title>
        <price>80</price>
    </book>
    <book>
        <ISBN>35235348</ISBN>
        <title>Python programming</title>
        <price>65</price>
    </book>
    <book>
        <ISBN>67676348</ISBN>
        <title>Java development</title>
        <price>76</price>
    </book>
    <book>
        <ISBN>27974348</ISBN>
        <title>NodeJS development</title>
        <price>90</price>
    </book>
</books>

给定如下创新格式XML文档2：

<?xml version="1.0" encoding="utf-8"?>
<table id="books" border="1">
    <tr bgcolor="yellow">
        <th>书号</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
    <tr class="book">
        <td>8475484848</td>
        <td>XML技术</td>
        <td>80</td>
    </tr>
    <tr class="book">
        <td>35235348</td>
        <td>Python programming</td>
        <td>65</td>
    </tr>
    <tr class="book">
        <td>67676348</td>
        <td>Java development</td>
        <td>76</td>
    </tr>
    <tr class="book">
        <td>27974348</td>
        <td>NodeJS development</td>
        <td>90</td>
    </tr>
</table>

提出如下设计需求：

设计合适的应用分别读取以上XML文档全部文本并将文本返回到前端可视。
对读取的文本进行格式化处理后以表格形式输出图书信息。

6.2 设计分析

6.2.1 功能分析

测试用户期望功能如下：

测试用户读取传统XML文档并以文本形式呈现。
测试用户测试传统XML文本格式化输出（Table形式呈现）。
测试用户读取创新XML文档并以文本形式呈现。
测试用户测试创新XML文本格式化输出（Table形式呈现）。

图6.1 用户用例建模

6.2.2 核心业务数据流分析

数据流核心环节描述如下：

测试用户请求读取传统XML文档或创新XML文档并以文本形式呈现。
测试用户请求将当前XML文本进行格式化输出（Table形式呈现）处理。

图6.2 数据流建模

6.2.3 文件包设计分析

基于分层架构视角的文件包及文件设计如表6.1所述。

表6.1 文件包及文件设计
序号	包设计	文件设计
1	设计表示层包（包名：UI），相当表示层文件容器。	设计界面主页文件main.js。主页引入jquery框架（jquery.js），辅助表示层处理，也可读取测试文件。
2	设计数据层包（包名：data），相当数据层文件容器。	设计传统格式XML数据测试文件books_old.xml。设计创新格式XML数据测试文件books_new.xml。

图6.3 文件包及文件关系建模

6.3 文件架构设计

图6.4 文件架构

文件功能说明见表6.2。

表6.2 文件功能说明
序号	文件名	作用
1	Books_new.xml	创新格式XML文档
2	Books_old.xml	传统格式XML文档
3	jquery-1.11.1.js	加载JQuery函数库，辅助数据可视处理及读取测试基础数据。
4	main.html	实现人机交互的用户界面主页
5	UI	界面处理逻辑文件所在文件夹
6	data	数据文件所在文件夹

6.4 代码实现

6.4.1 主页实现代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h3>传统格式XML文档与创新格式XML文档比较测试</h3>
    <hr />
    <span style="background-color:black;color:white" 
          onclick="view_Doc('./data/books_old.xml')">查看传统格式原始文档</span>
    <span style="background-color:black;color:white" 
          onclick="view_Doc('./data/books_new.xml')">查看创新格式原始文档</span>
    <hr />
    <textarea id="text_result" style="width:400px;height:300px"></textarea>
    <br />
    <input type="button" value="格式化当前文本以表格形式呈现" 
           onclick="text_to_table()" />
    <hr />
    <div id="format_result">
    </div>
</body>
</html>
<script type="text/javascript" src="./UI/jquery-1.11.1.js"></script>
<script type="text/javascript">
    //格式化当前文本
    function text_to_table() {
        var temp = $("#text_result").text();
        if (temp.indexOf("<table") >= 0) {
            $("#format_result").html(temp);
        } else {
            var temp = temp.replace("<books>", "<table border='1'><tr><th>书号</th><th>书名</th><th>价格</th></tr>");
            temp = temp.replace("</books>", "</table>");
            temp = temp.replace(/<book>/g, "<tr>");
            temp = temp.replace(/<\/book>/g, "</tr>");
            temp = temp.replace(/(<ISBN>|<title>|<price>)/g, "<td>");
            temp = temp.replace(/(<\/ISBN>|<\/title>|<\/price>)/g, "</td>");
            $("#format_result").html(temp);
        }
    }

    //查看原始文档
    function view_Doc(file) {
        $.get(file, function (data) { $("#text_result").text(data); }, "text");
    }
</script>

6.4.2 实现效果

读取传统格式XML文档实现效果如图6.5所示。

读取创新格式XML文档实现效果如图6.6所示。

图6.5 读取传统格式XML文档实现效果

图6.6 读取创新格式XML文档实现效果

6.5 问题思考

问题提出：创新格式XML文档相对传统格式XML文档，其主优势是什么？

问题思考：

传统格式XML文档在做格式化输出时可能需要相对烦琐的处理（如：以Table形式呈现数据需介入较多字符串替换代码）。
创新格式XML文档在做格式化输出时（如：以Table形式呈现数据），处理步骤相对简单。
创新格式XML文档中由于标记名称相对固定，可编写通用函数对其访问。

6.6 仿真实训

给定如下传统格式XML文档：

<?xml version="1.0" encoding="utf-8"?>
<students>
    <student category="new_student">
        <s_id>8475484848</s_id>
        <s_name>Max</s_name>
        <age>18</age>
    </student>
    <student>
        <s_id>35235348</s_id>
        <s_name>Jack</s_name>
        <age>20</age>
    </student>
    <student>
        <s_id>67676348</s_id>
        <s_name>Json</s_name>
        <age>21</age>
    </student>
    <student>
        <s_id>27974348</s_id>
        <s_name>Rose</s_name>
        <age>19</age>
    </student>
</students>

给定如下创新格式XML文档：

<?xml version="1.0" encoding="utf-8"?>
<table id="trs">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr category="new_student">
        <td>8475484848</td>
        <td>Max</td>
        <td>18</td>
    </tr>
    <tr>
        <td>35235348</td>
        <td>Jack</td>
        <td>20</td>
    </tr>
    <tr>
        <td>67676348</td>
        <td>Json</td>
        <td>21</td>
    </tr>
    <tr>
        <td>27974348</td>
        <td>Rose</td>
        <td>19</td>
    </tr>
</table>

提出如下设计需求：

设计应用，分别读取传统格式XML文档、创新格式XML文档并以表格形式在网页呈现数据。
仿照本章案例完成相关设计并实现相关功能。