Chinaunix首页 | 论坛 | 博客
  • 博客访问: 18925923
  • 博文数量: 7460
  • 博客积分: 10434
  • 博客等级: 上将
  • 技术积分: 78178
  • 用 户 组: 普通用户
  • 注册时间: 2008-03-02 22:54
文章分类

全部博文(7460)

文章存档

2011年(1)

2009年(669)

2008年(6790)

分类:

2008-04-14 15:49:43

测试类

  可以用简单的 HTML 页面和一些 Javascript 来测试完成的类。测试页面将在上方显示历史记录按钮,只有的按钮是突出显示并且可以单击的。我们没有建立复杂的测试应用程序,该页面在每次单击链接时仅仅生成随机数。这些数字就是记录到历史堆栈中的事件。堆栈也在页面上显示,指针标记的当前记录用粗体显示。

  清单 7. 测试历史堆栈的简单 HTML 页面

<html>
<head>
<title></title>
</head>

<body>

<div id="historybuttons"></div>
<div>
<a href="#" onclick="do_add(); return false;">Add Random
Resource</a>
</div>
<div id="output" style="margin-top:40px;"></div>

</body>
</html>

  在该 HTML 页面的头部需要添加清单 8 所示的 Javascript 代码。这段代码首先实例化一个新的历史堆栈,并载入可能已经保存到浏览器 cookie 中的所有数据。

  我们定义了四个 do_*() 函数,这些事件处理程序将添加到后退、前进和刷新按钮的链接中,此外还有 Add Random Resource 链接,如清单 7 所示。

  display() 函数检查历史记录对象的当前状态,并为历史记录按钮生成 HTML。它还生成历史记录中存储的项目列表。

  清单 8. 集成历史记录类和测试页面的 Javascript

<script type="text/javascript" src="history.js"></script>
<script type="text/javascript">

var myHistory = new HistoryStack();
myHistory.load();

function do_add()
{
 var num = Math.round(Math.random() * 1000);
 myHistory.addResource(num);
 display();
 return false;
}

function do_back()
{
 myHistory.go(-1);
 display();
}

function do_forward()
{
 myHistory.go(1);
 display();
}

function do_reload()
{
 myHistory.go(0);
}

function display()
{
 // Display history buttons
 var str = '';
 if (myHistory.hasPrev()) {
  str += '<a href="#" onclick="do_back(); return false;">'
+ '<img src="icons/back_on.gif" alt="Back"
/></a> ';
 } else {
  str += '<img src="icons/back_off.gif" alt="" /> ';
 }
 if (myHistory.hasNext()) {
  str += '<a href="#" onclick="do_forward(); return false;">'
+ '<img src="icons/forward_on.gif" alt="Forward" />'
+ '</a> ';
 } else {
  str += '<img src="icons/forward_off.gif" alt="" /> ';
 }
 str += '<a href="#" onclick="do_reload(); return false;">'
+ '<img src="icons/reload.gif" alt="Reload"
/></a>';
 document.getElementById("historybuttons").innerHTML = str;

 // Display the current history stack, highlighting the current
 // position.
 var str = '<div>History:</div>';
 for (i=0; i < myHistory.stack.length; i++) {
  if (i == myHistory.current) {
   str += '<div><b>' + myHistory.stack[i] +
'</b></div>';
  } else {
   str += '<div>' + myHistory.stack[i] + '</div>';
  }
 }
 document.getElementById("output").innerHTML = str;
}

window.onload = function () {
 display();
};
</script>

  运行该测试页面,可以看到历史记录按钮反映了历史堆栈的状态(见图 2)。比如,第一次加载页面时,按钮都是灰色的。向堆栈中添加一些记录后,后退按钮就变成活动的了。如果在堆栈中回退,前进按钮就变亮了。还要注意的是,如果单击几次后退然后再单击 Add,那么堆栈会被截掉一部分,新的事件 被压入缩短的堆栈顶部。


图 2. 历史堆栈的测试页面

  测试完该类后,就可以进入最激动人心的阶段了。

  集成历史记录对象和相册

  我们将从第 1 部分留下的问题开始,直接从相册页面调用历史堆栈。不需要修改任何 文件。

  首先需要添加一个 div 标记来存放历史记录按钮。如清单 7 所示。

<div id="historybuttons"></div>

  历史堆栈代码被保存到一个 .js 文件中,该文件将链接到相册页面。

<script type="text/javascript" src="history.js"></script>

  需要实例化历史堆栈对象并从缓冲区加载它们。这些操作可以添加到相册页面上已有脚本的前面。

var myHistory = new HistoryStack();
myHistory.load();

  在针对历史堆栈的测试应用程序中,只存储随机数作为事件。我们可以在历史记录中存储需要的任何信息,但是要记住,当用户单击应用程序的后退按钮时,还要确定历史堆栈中的内容是什么。应用程序只有两个动作与 x_get_table() 和 x_get_image() 函数有关。因此对于每个表链接,可以存储名称 table 再加上 start 和 step 值作为事件标识符,比如 table-10-5。类似地,可以存储名称 image 和将被查看图像的 index,如 image-20。
阅读(250) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~