js实现目录树插件

一直就像写一个目录树插件，但是始终不知从何处下手，这个跟日期组件一样，需要一点算法和逻辑思维的知识。
气质凡事一定要经过亲身经历才知道它的简单，这不，我以前确实把它想做特别复杂，现在亲自动手之后，才发现也不是很难的。

首先，要构造目录树，最重要的就是数据结构了，数据的构造形式直接影响这dom结构的构造，经过几番思考，最终想出了以下的数据结构（json格式）：

{
                "name":"ExtremeGraphics",
                "child":[
                    {
                        "name":"CUI",
                        "child":[
                            {
                                "name":"Resource",
                                "child":[
                                ]
                            }
                        ]
                    }
                ]
            }

接下来就是怎么去解析这种结构了，要能够解析到无限级的分支，这让我颇费周折，最后在网上查了一下资料，发现js递归是一个不错的选择，于是就临时学了js递归的思想，并且把它成功运用到了目录树的解析上。

(function(data, ul) {
                for(var i = 0; i < data.length; i++){
                    var d = data[i];
                    var c = d['child'];
                    var li = doc.createElement('li');
                    var a = doc.createElement('a');
                    a.href = 'javascript:void(0);';
                    a.innerHTML = d.name;
                    if(i === data.length - 1) {
                        li.className = 'last';
                    }
                    li.appendChild(a);
                    list.push(a);
                    ul.appendChild(li);
                    if(c) {
                        var _ul = doc.createElement('ul');
                        _ul.style.display = 'none';
                        li.appendChild(_ul);
                        var aa = doc.createElement('a');
                        aa.className = i === data.length - 1 ? 'plus last' : 'plus';
                        li.insertBefore(aa, a);
                        a.className = 'close';
                        arguments.callee(c, _ul);
                    } else {
                        a.className = 'file';
                    }
                }
            })(data, ul);

初始化Dom这块难啃的骨头解决了，剩下的事就没啥挑战性了，比如点击事件监控，不过就是循环的显示隐藏嘛。
另外注明：这个插件所用到的图片和样式都是利用的网上现有的目录树组件的图片和样式，没时间去弄这些杂事，你懂的。

演示地址：http://xiechengxiong.com/174.html
欢迎光临我的前端博客：http://xiechengxiong.com/