对CustomEvents.js文件的解读

建立Visualization需要的步骤

  1. 建立恰当的控件控制Visualization（例如插入元素，删除元素等）；
  2. 为上述建立的控件建立callBack（回调函数）
    Creates callbacks for these controls that implement the visualizations. The visualizations are implemented by sending an array of strings to the animation manager – the animation manager will then implement the animation, and handle all of the animation controls for you
    为这些实现可视化的控件创建回调。 通过向动画管理器发送字符串数组来实现可视化 - 动画管理器将实现动画，并为您处理所有动画控件
  3. Listen for an undo event from the animation manager. When an undo event is detected, roll back the last operation
    从动画管理器中听取撤消事件。 当检测到撤消事件时，回退上次的操作（“上一步骤”按钮功能响应？）

使用Algorithm方法/函数

所在文件：Algorithm.js
注意：Algorithm是个人造类（原本的js中没有的，是新的object）

1. 函数定义

1
2
3
4
5
6
7
8
function MyAlgorithm(am, w, h)
{
	this.init(am, w, h);
}

MyAlgorithm.prototype = new Algorithm(); 					// 创建一个新的Algorithm对象
MyAlgorithm.prototype.constructor = MyAlgorithm;		// 新对象的构造函数
MyAlgorithm.superclass = Algorithm.prototype;			// 新对象继承的超类（新对象继承父类ALgorithm的属性）

对于AnimationMain.js 文件中的 reorderSibling(node1, node2) 函数的实现

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<div id="Water" style="width:100px;height:20px;background-color:red;">node1</div>
	<div id="myList" style="width:100px;height:20px;background-color:yellow;">node2</div>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="reorderSibling()">点我</button>
<script>
function reorderSibling(){
	var node1=document.getElementById("Water");
	var node2=document.getElementById("myList");
	
	node1.parentNode.replaceChild(node1,node2);
	node1.parentNode.insertBefore(node2, node1);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>

</body>
</html>

效果图

reorderSibling-node1-node2-function