WEB3D虚拟试衣系统项目需求说明书.doc

Web 3D 商城及虚拟试衣系统 浙江华炫网络科技有限公司—浙江大学工程及计算机图学研究所
浙江华炫网络科技有限公司
—浙江大学工程及计算机图学研究所

WEB 3D商城及虚拟试衣系统
需求规格说明书
编制单位：浙江大学工程及计算机图学研究所
编 制 人：王进
签字盖章：
审核单位：浙江华炫网络科技有限公司
审 核 人：陈生迪，刘邓
签字盖章：

编制日期：2009年9月23日
审核日期：
目 录
摘 要 3
1．引言 4
1.1编写目的 4
1.2项目背景 4
1.3参考资料 4

2.任务概述 5
2.1目标 5
2.2运行环境 5
3．功能需求 6
3.1功能规格 6
3.1.1 3D商城功能规格 6
3.1.2 3D试衣间功能规格 8
3.2性能规格 9
3.2.1精度 9
3.2.2时间特性要求 9
3.2.3灵活性 9
3.3其他专门要求 10
4. 功能阶段开发安排 11
4.1 第一阶段功能开发安排 11
4.2 第二阶段功能开发安排 11
4.3 第三阶段功能开发安排 12
5. 运行环境需求 13
5.1设备 13

摘 要
华炫科技“Web3D的3D商城及虚拟试衣系统”采用B/S的先进构架设计研发，借助VR、即时通讯和数据库匹配技术构建一个具有虚拟商城游览、虚拟店铺物品选购、服装在线试穿、真人秀视频展示、顾客好友聊天、商家店铺DIY，虚拟导购等功能的买双方互动交流网络平台以及为品牌企业提供较为全面的展示平台，提高客户网上购衣的便捷性、趣味性、成交率、合体性和满意度，激发消费者网上交易的热情以及扩大服装供应商的销售渠道的作用。
关键词：3D商城、虚拟试衣、B/S构架。
1．引言
1.1编写目的
为明确web3D商城开发的项目需求，安排项目规划与进度、组织软件开发与测试，撰写本文档，本文档供项目委托方、开发方的项目经理、设计人员、开发人员参考。
1.2项目背景
a. 项目的委托单位为浙江华炫网络科技有限公司，开发单位为浙江大学工程及计算机图学研究所
b. 项目开发周期为一年半。
1.3参考资料
[1] 浙江邓创网络科技有限公司，刘邓，WEB 3D虚拟试衣系统报告书，2009年
[2] 基于Web3D的三维商城及虚拟试衣系统—项目合同，2009年
[3] 陈生迪，3D商城功能概要，2009年
[4] 陈生迪，3D试衣间功能概要，2009年
[5] 王进，陈生迪，华炫3D商城功能概要反馈，2009年
2.任务概述
2.1目标
为提高网上购物的趣味性、成功率和顾客满意度，本软件在实施后：用户可以在互联网的虚拟世界中体验虚拟逛街带来的乐趣，可以约上好友一起进行网上逛街、聊天，在虚拟世界里选购自己喜欢的衣服，听取导购员的专业意见以及好友的评价意见，同时自己可以不同灯光场合下试穿自己喜欢的服装效果；服装供应商也可以在此形象地展示新产品，从而营造良好的服装网上交易氛围，提高经营效率，增加电子商务的交易额。
2.2运行环境
操作系统：Microsoft Windows XP
浏览器： IExplore6.0以上
插件： Adobe Flash Player 10 ActiveX
数 据 库：Microsoft SQL Server 2000（或2005）

3．功能需求
3.1功能规格
3.1.1 3D商城功能规格
1、 整体场景设计，可以参考某个广场来设计，如宁波的万达广场。场景最中间是主楼，命名为华炫商城，四周可以建设其他商城或大厦。主楼及周边大厦上显示的名字都可以自己定义。
2、 主楼计划建设50层，每层约40个店铺（个性化楼层建设6层，其他楼层按照这6个楼层来复制，穿插着复制）。整个场景要求纯3D的，可以360度转动，项目建设3幢主楼。周边大楼可以先设计外框（有些房屋可以只是个摆设，为了让整个广场看起来更加和谐），里面布局可以后期设计或直接用主楼的布局。各建筑可以按照商品类别如男装、女装、童装等分为A座、B座、C座和F座。
3、 店铺要能定义，自定义内容包括：
l 店铺门面设计多种方案供商家选择，商家可以自己定义LOGO，以及门面上放置的广告图片（商家提供Logo及广告图片，由后台美工予以完成）。
l 店铺内部结构也提供多种方案供商家选择，衣服挂靠由商家自己定义，商家可以自己定义LOGO、广告图片（商家提供Logo及广告图片，由后台美工予以完成）、顶部门店公告；商家可以自己选择沙发类型及摆放位置，可以自己选择电视机类型及摆放位置。
l 店铺中间放置衣柜，衣柜中的衣服由商家自己定义。
l 店铺右上角放置店铺的缩略图。
l 店铺可以设置营业和不营业：不营业时用户将无法进入该店铺。
l 注：设计40种个性化店铺供商家选择，如果按1层40家店铺的话，刚好每个店铺都是不一样的；然后其他层的话，还是用这40种店铺，只改变排列方式。
4、 （3D商城和华炫商城独立开来，3D商城上面能独立完成整个交易过程）店铺中的衣服参数包括：货号、产品名称、产品价格等所有产品涉及到的字段。功能包括：试衣、查看详情和放入购物车；点击试衣跳往试衣系统，点击查看详情，显示具体产品信息，点击放入购物车将商品放入购物车中（商城需要提供购物车功能，流程是用户下订单—>买家付款给我们à我们通知店家发货à买家确认收货à交易完成；还有退货也需要有，即包括整个商城的购物流程）。
5、 用户功能包括：
l 用户必须先登陆才能使用以下功能。
l 收藏夹：用户可以将喜欢的商品放入收藏夹中。
l 好友功能：用户之间可以相互加好友，好友功能可以参考QQ好友来设计。
l 用户组队：用户可以组建队伍，队伍里面的人可以相约一起逛街。
l 聊天功能：好友之间可以相互聊天，聊天种类分为：私聊、当前、世界和组队四个频道；私聊是指两个用户之间的聊天，当前是指当前场景内的用户能看到你说的话，世界是指所有用户都能看到你说的话，世界频道说话需要扣除积分，积分可以直接冲，也可以通过购买商品获得；组队聊天是指一个队伍里面的用户可以看到聊天内容。不同频道通过设置不同字体颜色来区分。不同频道的说话内容可以过滤掉。
l 可以屏蔽用户发言，防止用户发布不良信息或违法信息。
l 用户之间可以相互传送，就是说一个用户可以直接传送到他的好友所在的场景。
l 用户头顶显示用户昵称（昵称左边显示用户等级图标，不同等级显示不同图标以示区别），未登陆用户显示游客。
l 鼠标移动到用户身上后，会显示用户的所在地，没有数据则显示未知。
l 给登陆用户和未登陆用户各提供默认虚拟角色男女各1套，另外提供一些更为漂亮的虚拟角色（本项目提供男女10套左右），由用户花用积分购买（积分可以直接冲，也可以通过购买衣服获得）。
l 用户加上级别，不同级别享受不同折扣优惠（具体折扣优惠也需要包含在项目中）。
6、 商城导航：场景底部放置商城导航按钮，按钮分为场景导航、店铺导航和用户登陆。
l 场景导航：用户可以直接点击导航中的连接传送到不同场景。
l 店铺导航：用户可以直接点击导航中的连接传送到不同的店铺，店铺导航只会显示当前楼层内的所有店铺名称。
l 用户登陆：点击后可以直接登陆，没有帐户的可以点击注册进行用户注册；未登陆用户只能观看产品及一些简单的功能。
l 放置一个按钮，用户点击后可以直接退出到商城的入口。
7、 各楼层之间用电梯连接：电梯可以设计成室内扶梯或室外观光电梯。
8、 广告说明：
l 大楼外边框的广告可以自定义。
l 大楼内部各商铺之间可以放置视频广告，视频广告可以自定义。
l 大楼内部其他醒目位置放置大型广告，也可以自定义。
9、 地图右上角放置一个小地图，小地图可以点击隐藏和显示，小地图顶上显示用户所在场景地点和坐标(商城加入坐标功能，不显示具体坐标值)，小地图中以红点显示用户所在位置，防止用户迷路（以其他颜色的点显示当前场景的其他用户，也可以设置不显示）。
10、其他说明：
l 屏幕上适当位置放置聊天窗口。
l 每个路口放置导航标志（导航标志上面的文字可以自定义）。
l 提供隐藏用户功能：屏幕上只显示自己，其他用户全部不显示，是用来在人多的时候，防止屏幕卡住。
l 加上导购(即解说员)：每个楼层放置一个导购员，每家店铺放置一个导购员，导购员有专人操作（也可以设置为自动，指定一些信息让其自动在那里说话）。
l 店铺可以定制：如果某些商家需要定制特殊的店铺，可以向我们申请，然后再由开发商根据商家要求开发定制的店铺，具体费用可以协商（定制场景、大小、摆设等，房间基本形状为立方形）。
l 在线时间可以积累积分，具体可以后台设置，积分可以用来购物（专门设立积分购物的店铺）。
l 店铺上要显示门牌编号
11、系统设置（这里只涉及一小部分，其他设置操作根据整个系统来完成）：
l 用户购物送积分，具体多少金额送多少积分可以设置。
l 屏蔽用户发言。
l 用户等级设置：等级名称、等级图标、等级享受折扣都可以设置；
l 服装数据输入，维护
l 广告设置
l 主楼名称设置
l 导航标志文字设置
l 门面LOGO和广告设置
l 用户信息维护
3.1.2 3D试衣间功能规格
1、 在线浏览、试穿服装
l 浏览各种品牌和各种类型的服装：进入试衣系统后，中间显示模特，两边显示各种品牌和各种类型的服装，用户可以点击进行试穿。服装显示可以分为4块，左边2块，分别是上衣和裤子，右边2块分别是套装和鞋、包、饰品等搭配用品。
l 试穿的衣服再次点击就可以脱掉，也可以点击底部临时方案中的叉叉脱掉。
l 鼠标移动到衣服上后，显示详细按钮，点击出现详细信息页面，详细页面中放置加入收藏按钮。
l 放置服装的4块内容可以点击隐藏和显示。
l 快速简单查找、选择服装：每块显示的服装边上可以进行快速查找，可以按品牌、年份、颜色、风格等进行简单的查询。
l 快速高级组合查找、选择服装：点击高级查找按钮，跳出高级搜索页面，输入详细参数进行查询。
2、 个人试衣
l 用户能方便快速地建立自己的3D人体模型(模型可以自动生成)：
（1）、建立男、女、儿童三个原始模型，用户可以通过调节尺寸参数来打造自己的个性模特。
（2）、模特的脸和头发可以更换，用户根据自己的喜好组合出适合自己的模特。
（3）、可以自定义模特的体形，如肩宽、胸围、腰围、臀围、手长、身高等，调节这些参数时，需要保证整体效果的协调。
（4）、用户可以更换肤色。
（5）、自定义形象在用户登陆后可以保存（保持尺寸参数，肤色类型、发型等数据库字段，导入时，通过标准模板根据个性尺寸进行变型而得）。
l 提示功能：系统自动提示用户穿的衣服是紧了还是松了，以引导用户选择适合自己的衣服（根据用户身材与衣服尺码进行匹对）。
l 利用已经建立的3D服装进行试穿，查看服装在典型的姿势下的静态效果。
l 模特可以360度旋转，可以自动旋转，也可以手动旋转。
l 模特可以局部放大
l 各种不同场景、灯光下的穿着效果：设计多种不能的场景及灯光效果，由用户自己进行选择。
l 衣服的叠穿效果：如用户先穿上了一件衬衫，然后在外面再穿上一件西装。考虑到碰撞检测影响速度，对于部分内层衣服露到外层情况不做调整（叠穿效果功能可以设置启动或关闭）
l 实现领带、鞋帽、饰品等的搭配效果。
3、 真人走秀视频关联
l 将华炫公司提供的某些服装的真人走秀视频放置在相关服装试衣界面中。
4、 其他功能说明
l 试衣界面底部放置临时方案和历史记录，临时方案存放用户临时搭配的服装，历史记录保存了用户的所有试穿记录，用户可以保存自己喜欢的衣服搭配到用户的衣柜中。
l 加上拍照模式，用户选择好衣服和场景后，可以进入拍照模式进行拍照，拍完的照片可以保存到用户相册中、保存到用户电脑上或发送给好友。

3.2性能规格
3.2.1精度
l 该系统对用户的身体数据的采集依据GB 16160-1996《服装人体测量的部位及方法》只对身高、颈围、胸围、腰围、臀围、臂长、立档高、体重、肤色发型和发色进行考虑，其他数值不做要求；
l 该系统在进行试穿匹配时根据GB 16160-1996《服装人体测量的部位及方法》分配各数据项的权重采用欧式距离进行模糊匹配计算；
l 该系统将提供一定的出错处理功能，尽可能保证系统的健壮性。对于比较重要的模块如在线浏览、试穿服装模块，采用模糊匹配技术。
3.2.2时间特性要求
l 响应时间；用户在网上浏览、使用该系统时，无明显的延时现象；
3.2.3灵活性
该系统采用模块化设计，模块之间是松耦合的，添加和删除模块非常方便，当需求发生变化的时候，向系统中间添加功能也将非常的简单。该系统将充分考虑到负载平衡的问题，随着访问量的增加，可以通过增加服务器的方面来提供更多的用户在线访问的功能。对于为了提供这些灵活性而进行的专门设计的部分协商后加以标明。
3.3其他专门要求
l 该系统采用SQL Server数据库，只要做到即时备份，数据的安全性可以得到保证。由于用户试穿与上传的访问量比较大，加上有大量的图片素材，可以采用P2P进行匹配，保证系统运行的流畅性。
l 统一界面模式和操作模式，这样有利于用户的接受和使用。
l 关于用户界面规范： 所有的模块都是以BS模式实现，采用BS的操作模式。
l BS的模式保证了真正的Thin-Client的机制，利用大家使用习惯的IE浏览器，真正的方便用户的使用。
4. 功能阶段开发安排
4.1 第一阶段功能开发安排
基本内容和开发时间见合同书，在本阶段主要完成下面功能
1、 整体场景设计
2、 一幢主楼3-6层，商铺建设
3、 店铺中的衣服参数显示，并关联到相关网页页面
4、 用户功能包括：
l 用户必须先登陆才能使用以下功能。
l 收藏夹：用户可以将喜欢的商品放入收藏夹中。
l 聊天功能：私聊、当前、世界和组队聊天。
l 可以屏蔽用户发言，防止用户发布不良信息或违法信息。
l 用户头顶显示用户昵称（昵称左侧显示用户等级图标），未登陆用户显示游客。
l 鼠标移动到用户身上后，会显示用户的所在地，没有数据则显示未知。
l 给登陆用户和未登陆用户各提供默认虚拟角色男女各3套供用户选择，
5、 商城导航：
l 用户登陆注册功能。
l 放置一个按钮，用户点击后可以直接退出到商城的入口。
6、 各楼层之间用电梯连接：电梯可以设计成室内扶梯或室外观光电梯。
7、 广告说明：
l 大楼外边框的广告可以自定义。
l 大楼内部各商铺之间可以放置视频广告，视频广告可以自定义。
l 大楼内部其他醒目位置放置大型广告，也可以自定义。
11、其他说明：
l 屏幕上适当位置放置聊天窗口。
l 每个路口放置导航标志。
l 提供隐藏用户功能：。
l 加上导购(即解说员)：。
l 在线时间可以积累积分，。
4.2 第二阶段功能开发安排

基本内容和开发时间见合同书，在本阶段主要完成下面功能
1、 店铺要能定义，自定义内容包括：
l 店铺门面自定义。
l 店铺内部结构自定义。
l 店铺中间放置衣柜，衣柜中的衣服由商家自己定义。
l 店铺右上角放置店铺的缩略图。
l 店铺可以设置营业和不营业：不营业时用户将无法进入该店铺。
2、用户功能包括：
l 好友功能：。
l 用户组队：。
l 更为漂亮的虚拟角色（本项目提供男女10套左右），。
l 用户之间可以相互传送，就是说一个用户可以直接传送到他的好友所在的场景。
l 用户加上级别，不同级别享受不同折扣优惠。
3、 商城导航：场景底部放置商城导航按钮，按钮分为场景导航、店铺导航。
l 场景导航：
l 店铺导航：。
4、 地图右上角放置一个小地图导航。
5、其他说明：
l 店铺可以定制：。
4.3 第三阶段功能开发安排
本阶段主要完成虚拟试衣系统开发

5. 运行环境需求
5.1设备
本系统推荐允许本系统所需的基本配置：
l 操作系统 Windows98/2000/XP 中文系统
l 适用 CPU Pentium IV 2GB 以上
l 内存 1GB 以上
l 硬盘 需 1GB 以上硬盘空间
l 100M以上以太网卡+ADSL

建议配备
l 操作系统 WindowsXP 中文系统
l 适用 双核2G以上
l 内存 2G 以上
l 硬盘 需 1GB 以上硬盘空间
l 100M以上以太网卡+ADSL

附录资料：
从 XML 生成可与 Ajax 共同使用的 JSON

时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 JavaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。
几年前，许多开发人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaScript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？

当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件的创建。第二，读取和解析 XML 会非常慢。

另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧：
l 简单编码
l 通过函数调用加载数据
l 编码对象

JSON 简介
要学习如何将数据编码成 JSON（它只是 JavaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。
清单 1. 基本的图形化图书馆
l version="1.0" encoding="UTF-8"?>

Code Generation in Action
JackHerrington
Manning

PHP Hacks
thor>JackHerrington
O'Reilly

Podcasting Hacks
JackHerrington
O'Reilly

ks>

这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）
清单 2 显示了这些数据在 JSON 中的效果。

清单 2. JSON 中的示例数据集
[ { id: 1,
title: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning' },
... ]

方括号 ([]) 表明这是一个数组。大括号 ({}) 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，我创建了一个散列表的数组 —— 用来存储这类结构式数据的一种常见方法。
另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 O'Reilly，我就必须使用反斜杠对它进行转义：'O\'Reilly'。 这让我编写的这个 XSLT 样式表更为有趣了一些。
我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解析。第二种方法是将日期作为一个对象，比如：
publishdate: new Date( 2006, 6, 16, 17, 45, 0 )
这段代码将 publishdate 的值设置为6/16/2006 5:45:00 p.m.。

简单编码
接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如 清单 3 所示。

清单 3. simple.xsl 样式表

utput method="text" />

var g_books = [

, {
id: f select="@id" />,
name: '',
first: '',
last: '',
publisher: ''
}
];

sl:stylesheet>

要理解此样式表，不妨先来看一下 清单 4 所示的输出。

清单 4. simple.xsl 的输出
var g_books = [
{
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
}, {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}, {
id: 3,
name: 'Podcasting Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}
];

这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看 清单 3，您会发现第一个模板匹配 "/" 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 标记来将文本从该数据输出到 JavaScript 输出代码。
对于字符串，我使用名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。
最后一个重要的元素是 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 simple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如 清单 5 所示。

清单 5. simple.html 文件

Simple JS loader

</head>

document.write( "Found "+g_books.length+" books" );

.html 文件使用 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 <script> 标记将数组的长度写出到浏览器页面，如 图 1 所示。

图 1. simple.html 的输出

好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！

通过函数加载
上述第一个示例很简单，而且在大多</p><p style='height:0px;padding:0;overflow:hidden'>38、数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的，这不成问题。但是如果页面动态创建了一个 <script> 标记来按需加载数据，那么就很有必要知道 <script> 标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个 JavaScript 函数，而不是只设置数据。

这个概念很重要，所以我将花一些时间来介绍一下为什么您必须要通过动态生成的 <script> 标记来加载数据。页面加载后，从服务器获得数据是 Web 2.0 的核心功能。一种方法是使用 AJAX 机制通过到服务器的调用来加载 XML。然而，出于安</p><p style='height:0px;padding:0;overflow:hidden'>39、全性的原因，AJAX 机制只限于从单一域获取数据。这在大多数情况下都没有问题，但有时，您可能需要 JavaScript 代码运行在他人的页面上（例如，Google Maps）。
在这种情况下从服务器获得数据的惟一方法是通过动态加载 <script> 标记。获悉 <script> 标记何时加载的最好的方法是让 <script> 标记返回的脚本调用函数而不是简单地加载数据。清单 6 显示了在函数调用中编码的数据。

清单 6. Function1.js
AddBooks( [
{
id: 1,
name: 'Code Generation in Action',
first: 'J</p><p style='height:0px;padding:0;overflow:hidden'>40、ack',
last: 'Herrington',
publisher: 'Manning'
}, {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}, {
id: 3,
name: 'Podcasting Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}
] );

清单 7 给出了相应的 .html 文件。

清单 7. Function1.h</p><p style='height:0px;padding:0;overflow:hidden'>41、tml
<html>
<head>
<title>Function 1 JS loader</title>
<script>
var g_books = [];
function AddBooks( books ) { g_books = books; }

drawbooks( g_books );

稍后将详细介绍 drawbooks 函数。这里重要的是了解一下页面如何定义 AddBooks 函数，该函数随后会由 function1.js 文件中的脚本调用。该 AddBooks 函数负责处理数据。而且被调用的 AddBooks 函数会向页面指示 标记被正确加载，并已加载完成。
要创建 function1.js 文件，我只对样式表稍微做了一点修改，如 清单 8 所示。

清单 8. function1.xsl 样式表
<xsl:template match="/">
AddBooks( [
<xsl:for-each select="books/book">
</p><p style='height:0px;padding:0;overflow:hidden'>43、<xsl:if test="position() > 1">,</xsl:if> {
id: <xsl:value-of select="@id" />,
name: '<xsl:value-of select="js:escape(title)" />',
first: '<xsl:value-of select="js:escape(author/first)" />',
last: '<xsl:value-of select="js:escape(author/last)" />',
publisher: '<xsl:value-of select="js:escape( pu</p><p style='height:0px;padding:0;overflow:hidden'>44、blisher )" />'
}</xsl:for-each>
] );
</xsl:template>

这里，我调用了一个函数，而不是简单地设置一个变量。这就是我所做的惟一更改。
回到页面，我使用了 drawbooks 函数来构建书的表格，这样我就能够确认数据被正确编码和正确显示。此函数是在 drawbooks.js 内定义的，如 清单 9 所示。

清单 9. Drawbooks.js
function drawbooks( books )
{
var elTable = document.createElement( 'table' );
for( var </p><p style='height:0px;padding:0;overflow:hidden'>45、b in books )
{
var elTR = elTable.insertRow( -1 );
var elTD1 = elTR.insertCell( -1 );
elTD1.appendChild( document.createTextNode( books[b].id ) );
var elTD2 = elTR.insertCell( -1 );
elTD2.appendChild( document.createTextNode( books[b].name ) );
var elTD3 = elTR.insertCell( -1 );
</p><p style='height:0px;padding:0;overflow:hidden'>46、
elTD3.appendChild( document.createTextNode( books[b].first ) );
var elTD4 = elTR.insertCell( -1 );
elTD4.appendChild( document.createTextNode( books[b].last ) );
var elTD5 = elTR.insertCell( -1 );
elTD5.appendChild( document.createTextNode( books[b].publisher ) );
}
document.body.</p><p style='height:0px;padding:0;overflow:hidden'>47、appendChild( elTable );
}

这个简单函数创建了一个表格节点，然后循环访问书的列表并为每本书创建一行，为每个数据元素分配一个单元格。此页面上的代码的结果如 图 2 所示。

图 2. function1.html 的结果

现在我就可以查看一下此页面的输出并确认来自原始 .xml 文件的一切均已被正确转换成 JavaScript 代码，且数据被发送到 AddData 函数并被正确添加到页面。

细化函数调用技术
我很喜欢函数调用这一技术，但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用，如 清单 10 所示。

清单 </p><p style='height:0px;padding:0;overflow:hidden'>48、10. Function2.js
AddBook( {
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
} );
AddBook( {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
} );
...

对 .html 页面只需做少许修改，如 清单 11 所示。

清单 11. Funct</p><p style='height:0px;padding:0;overflow:hidden'>49、ion2.html
...
<script>
var g_books = [];
function AddBook( book ) { g_books.push( book ); }

...

这里更改了 XSLT，以使函数调用驻留在 for-each 循环体内。清单 12 显示了更新后的样式表。

清单 12. function2.xsl
...

AddBook( {
id: ,
name: '',
first: '',
last: '',
publisher: ''
} );