在上一文章中，用面向过程的思想实现了对二叉树的三种遍历。这篇采用面向对象实现了一下。
定义一个Node类，把遍历好的node节点保存在对象的属性中，把三种遍历方法和渲染方法作为对象的方法。
Node类代码如下：
function Node(){
this.nodeArray = [];
}
Node.prototype = {
//前序
dlr : function(root){
if(root){
this.nodeArray.push(root);
this.dlr(root.firstElementChild);
this.dlr(root.lastElementChild);
}
},
//中序
ldr : function(root){
if(root){
this.ldr(root.firstElementChild);
this.nodeArray.push(root);
this.ldr(root.lastElementChild);
}
},
//后序
lrd : function(root){
if(root){
this.lrd(root.firstElementChild);
this.lrd(root.lastElementChild);
this.nodeArray.push(root);
}
},
//可视化遍历
render : function(){
var timer = null,len = this.nodeArray.length,i = 0;
var nodeArray = this.nodeArray;
timer = setInterval(run,500);
function run(){
if(i < len){
//清除上一个节点的背景色
if(i-1 > -1){
nodeArray[i-1].className = "";
}
nodeArray[i].className = "selected";
i++;
}else{
//清除最一个节点的背景色
nodeArray[i-1].className = "";
clearInterval(timer);
}
}
this.nodeArray = [];
}
}
然后我们只需要给button添加下点击事件就可以了
//根据不同的按钮调用不同的排序算法
function btnHandle(){
var id = event.target.id;
var root = $('tree_wrap');
var tree = new Node();
switch(id){
case 'dlr':
tree.dlr(root);
break;
case 'ldr':
tree.ldr(root);
break;
case 'lrd':
tree.lrd(root);
break;
}
tree.render();
}
function init(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
addHandler(btns[i],"click",btnHandle);
}
}
init();