XML + XSL + JS 构建小型Web App （一）

XML + XSL + JS 构建小型Web App

摘要：本文介绍如何使用XML,XSL技术，做到内容和显示样式的分离。采用到的其他技术包括：xmldom , javascript 。

关键字：xml , xsl , javascript ,web application, xmldom。

前一段时间应聘一份兼职， 要求提供作品，我就赶了这么一个东西出来，后来觉得太简陋了，没有好意思拿出手，但就这么扔掉又觉得可惜，其中也实现了一些想法。幸好可以放在这儿，如果对大家有点帮助，那荣幸之至。

分以下几个方面分别介绍这个“小东西”：需求和设计 ， 具体实现， 小结 。

一、需求和设计

需求:

做一个个人简历的小型web应用，要求以下功能：
1.可以选择不同的样式风格察看简历的内容，并根据不同需要对内容进行筛选排序。
2.可以对内容的内容样式进行管理。
3.对简历进行管理需要输入密码。
4.简历文件拷贝到其他电脑上仍然可以完成上面的操作。

基于以上四点需求，做如下分析：

1.采用多个文件完成需求（htm 文件，js文件， xml文件 和 xsl 文件）。使用xml文件作setting 文件(配置文件)和数据记录文件，xsl文件作为样式信息记录文件，js文件中放实现“业务逻辑”的javascript function。用户访问htm文件，调用这些功能。
2.简历信息用xml文件进行存储，通过采用不同的样式单文件进行转换实现不同样式风格察看和对内容进行筛选的需求。
3.使用javascript 和 dom 技术操作xml文件，实现对简历内容的编辑功能。
4.密码加密存储。

设计：

有两种思路可以考虑采用，如下：
1）文件清单，框架如下：
index.htm //入口文件，通过显示/隐藏层达到显示不同内容的目的
index.htm.files //文件夹
|- js //文件夹， 存放javascript文件
|- data //文件夹， 存放数据文件，xml格式
|- styles //文件夹， 存放样式文件，xsl格式
|- images //文件夹
- setting.xml //配置文件，xml格式

2）文件清单，框架如下：
index.htm //入口文件，使用frame
index.htm.files //文件夹
|- js //文件夹， 存放javascript文件
|- data //文件夹， 存放数据文件，xml格式
|- styles //文件夹， 存放样式文件，xsl格式
- setting.xml //配置文件，xml格式
- welcome.htm //欢迎页
- disp.htm //显示简历
- edit.htm //编辑简历
- set.htm //设置/修改 密码，显示样式
两种思路各有优点，思路 1）不用解决页间传递参数的问题，思路2）整体结果更清晰，便于代码的管理扩展。
我采用思路 1），不用页间传递参数，程序比较稳定，客户端浏览器适应性强。这种思路中对div的使用类似于ASP.NET中的ASP:Panel 。

基于这样的框架设计，内容相关的信息保存在 xml文件里， 显示样式的信息记录在 xsl 文件中，很方便的就可以更换显示样式。代码的重用率很高。这一点可以在后面具体实现的过程中深切的体会到。这本身也是xml技术倡导的原则和明显优势 。