基于树形结构结合递归思想优化页面响应速率

基于树形结构结合递归思想优化页面响应速率

 

大多数的前端页面因为需求的复杂性会设计出十分迷人的事件效果，配合着具体的业务逻辑代码来完成功能需求，这对开发人员来说，随之而来的是系统负担的加大。如何解决系统性能与需求之间的矛盾，优化配比，开阔思路，是要切身思考的问题。

 

本文是结合主页标题栏的业务设计来讲的，需求是这样的：

主页元素:

 

鼠标进入事件：

 

鼠标点击事件进入最里层的子标题展示具体的页面。

 

大致的流程就是这样的，从上面的需求我们可以看出，标题栏的子标题和子子标题数量不限，会有很多，父子关系有很多层，这种结构给它设计到程序当中，是需要动一番心思的。另一个需要考虑的问题是，如此多层的结构，在前端页面访问其所对应的函数时，系统压力增大导致的响应速率下降从而带来的用户体验。

 

基于上述问题，在自己思考和借鉴他人思路后，我是如此实现的：

对于多层的节点结构问题，把它的节点类化，作为普通java类来使用，给予基本的属性和方法，增加一个比较重要的属性，其自身类的集合，并实现get、set。代码如下：

 

这里的思路就是依据树形结构的存储方法顺序存储而得来的，把一个满二叉树从上到下，从左到右顺序编号，依次放到数组中，可得到如图示结果：

 

深入理解二叉树，可以访问：

http://www.cnblogs.com/wservices/archive/2009/08/23/1547080.html

 

到这里，实体类型已经确立，对于实体映射到方法及具体的调用过程，我这里就不说了，需要指出的一点是，静态方法用类点出可以大大明确和简洁逻辑，跳过繁琐的构造过程，对于某些只加载一次的方法无疑是最优的思路。

在后台获取到需要的树形结构的数据后，前台表现这种结构特征，无疑需要用到递归思想：

 

上面的initTopToolBar()方法在对树形结构数据docTitleTree进行循环的过程中，继续传入docTitleTree中的自身类集合值，当它没有了子集合后表明已经进行入到最底层的节点，这时循环结束，方法执行完毕，进行下面的逻辑输出。这里我们可以看到，树形结构结合递归，思路的清晰和代码的简洁性。

 

整个的实例基本完成了，相对于传统的点击后运行，上述的将所有须加载的数据在页面进入就运行的过程无疑大大提高了系统响应速率，这对注重用户体验，强调及时性的行业来讲是一个很大的帮助。