在使用frameset佈局的時候，經常會用到目錄樹，我們可以把一棵樹寫死，但是更多的情況是，這棵樹需要隨時被改動，所以我們期望的是他能夠被動態的構建。

MVC，算是瞭解一點，那本文就把這棵樹根據M-V-C給拆開分解吧。

下面就來看看這棵樹是怎麼構建的。

Module [資料層]

var tree = {
            "id": 0,"a1": {
                "id": 1,"name": "a1","children": {
                    "b1": "b1_1","b2": "b1_2","b3": "b1_3"
                }   
            },"a2": {
                "id": 1,"name": "a2","children": {}
            },"a3": {
                "id": 1,"name": "a3","children": {
                    "b1": "b3_1","b2": "b3_2","b3": "b3_3"
                }
            }
        };

這是一顆兩層的目錄樹，用ID來表示層級關係，name來表示改層的名字（也就是節點Text內容吧）。

Control [控制層]

var Tree =wQaWT function ( module ){
    function createNodeList( obj ) {
        //建立ul節點和documentFragmeng中間變數
        var n = document.createElement("ul"),docfrag = document.createDocumentFragment();

        //判斷obj是根節點還是孩子節點
        if(obj.id == 0) {
            n.setAttribute("class","tree_0");

            for(var key in obj) {
                if(key == "id") continue;
         
 
       //將節點插入
                var c = document.createElement("li"),span = document.createElement客棧("span");
                span.appendChild(document.createTextNode( obj[key].name ));
   程式設計客棧             c.appendChild(span);
                docfrag.appendChild( c );
            }
        }else if(obj.id && obj.id == 1) {
            n.setAttribute("class","tree_1");

            for(var key in obj) {
                if(key == "id"程式設計客棧
 
 || key == "name" || !obj.children) continue;
                for( var item in obj.children){
                    //將節點插入
                    var c = document.createElement("li");
                    c.appendChild(document.createTextNode( obj.children[item] ));
                    docfrag.appendChild( c );
                }
            }
        }
        n.appendChild( docfrag );
        //返回開始構建的ul節點
        return n;
    }

    //隱藏及顯示 工具函式
    function toggle(c){
        c.style.display = ((c.style.display == "none") ? "" : "none");
    }

    function createTree( obj ) {
        var root,child,count = 0;

        root = createNodeList( obj );
        for(var key in obj){
            if(obj[key] == "id" || !obj[key].children) continue;
            child = createNodeList(obj[key]);
            root.children[count].appendChild( child );
            //count來判斷插入的位置
            count++;
        }
        return root;
    }

    var T = createTree(module);
    var list = T.children;
    for(var i = 0,len = list.length; i < len; i++){
        list[i].getElementsByTagName("span")[0].onclick = function(){
            var obj = this.nextSibling;
            toggle(obj);
        }
    }
    return T;
}

這裡邊建立了三個函式，其中

createNodeList() //適用於構建一個樹子節點

其中使用documentFragment作為一個節點快取器，先把節點放置到documentFragment中，然後統一插入到ul，這也是比較常用的使用方式。

createTree() //構建一棵樹

基本整棵樹的構建就是分為這兩步，前者負責建立一個子節點，後者構建一棵樹。

在這顆樹中綁定了click事件，讓其可以摺疊，當然也可以在Tree這個類裡繫結更多的方法，這個就靠自己發揮了。

View [檢視層]

window.onload = function(){
    var T = new Tree(tree);
    document.getElementsByTagName("body")[0].appendChild(T);
}

整棵樹的構建，主要用到的是DOM元素的處理，這個必須牢牢掌握！

到此這篇關於使用動態構建目錄樹的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。