今天完成了百度前端技术培训的task22，实现了二叉树的三种遍历办法，并以动画的形式呈现，顺便复习了一下二叉树，学习了flexbox，试用了scss。

源码地址：https://github.com/IridescentMia/IFE-Mia/tree/gh-pages/task22-Binary%20Tree

demo: http://iridescentmia.github.io/IFE-Mia/task22-Binary%20Tree/

第一步：定义遍历函数

理解三种遍历

  • 前序遍历：父节点-左孩子节点-右孩子节点
  • 中序遍历：左孩子节点-父节点-右孩子节点
  • 后序遍历：左孩子节点-右孩子节点-父节点

用递归的方式实现很容易理解：

1
2
3
4
5
6
7
function preOrder(node){
    if(tree !== null){
        console.log(node);
        preOrder(node.firstElementChild);
        preOrder(node.lastElementChild);
    }
}

中序和后序类似前序，就不贴代码了。

第二步：理解DOM树，完成前序遍历

刚入手这个题目的时候，一直想着怎么定义节点，怎么定义树，偶然醒悟，DOM里面每个元素都是现成的节点，有node.firstElementChild, node.lastElementChild等指向子节点，DOM本身就是一颗大树~那接下来的工作就容易多了。

获取最顶层的元素，再调用之前写好的函数preOrder就可以实现前序遍历了，如下：

1
2
var domTree = document.getElementById('top-level');
preOrder(domTree);

第三步：以动画的方式呈现

将前两步的遍历结果存入数组，然后这一步只需循环一遍数组元素，并相应的改变样式即可。

这里用到了setInterval，每一个间隔循环一个数组元素。1.将前一个数组元素回归白色背景；2.将当前元素背景色设置为非白色。

最后附上两个flex的教程，从入门到精通的利器，强烈推荐