XML + XSL + JS 構建小型Web App （一） (轉)[@more@]

+ + 構建小型 App

北京資訊工程學院 劉海龍

to:xiaoleilong@mail.biti.edu.cn">xiaoleilong@mail.biti.edu.cn

 摘要： 本文介紹如何使用XML,XSL技術，做到內容和顯示樣式的分離。採用到的其他技術包括：xml , script 。

關鍵字：xml , xsl , ,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:Panel 。

基於這樣的框架設計，內容相關的資訊儲存在 xml檔案裡， 顯示樣式的資訊記錄在 xsl 檔案中，很方便的就可以更換顯示樣式。程式碼的重用率很高。這一點可以在後面具體實現的過程中深切的體會到。這本身也是xml技術倡導的原則和明顯優勢 。