【JS 设计模式】用组合模式来实现树形导航--代码结构思路分析（一）

树导航效果图：

组合模式的描述：

将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。

我们把部分用Leaf表示，把整体用Composite表示。组合模式是有一定规律的，在实现树导航的情况下，Composite需要包含一个以上Leaf，也可以包含一个以上Leaf和一个以Composite，为什么说要包含一个以上的，如果Composite不包含任何子child的话那么它就是Leaf，Leaf表示是最后一层结节。

树形导航代码片段：

[data-panel="tree"] .tree-folder, [data-panel="tree"] .tree-only, [data-panel="tree"] .tree-child {
    padding-left: 20px;
}
[data-panel="tree"] .tree-root, [data-panel="tree"] .tree-folder, [data-panel="tree"] .tree-only, [data-panel="tree"] .tree-child {
    position: relative;
}
[data-panel="tree"] .folder {
    display: block;
    position: relative;
    padding: 4px 6px;
    color: #333;
    cursor: pointer;
    overflow: hidden;
}
[data-panel="tree"] b {
    float: left;
    margin-top: 4px;
    background-position: 0 -35px;
    width: 20px;
    height: 16px;
}
[data-panel="tree"] i, [data-panel="tree"] b {
    background-image: url("../image/tree/tree_icon.png");
    background-repeat: no-repeat;
}
[data-panel="tree"] .tree-only > i {
    background-position: 0 -151px;
}
[data-panel="tree"] i {
    position: absolute;
    top: 50%;
    left: 0;
    height: 28px;
    width: 16px;
    margin-top: -14px;
}
[data-panel="tree"] .tree-folder > i {
    background-position: 0 -61px;
    cursor: pointer;
}
[data-panel="tree"] .tree-child:not(:last-child) {
    background-image: url("../image/tree/tree_line.png");
    background-position: 0 0;
    background-repeat: repeat-y;
}
[data-panel="tree"] .tree-folder.last > i {
    background-position: 0 -91px;
}
[data-panel="tree"] .tree-only.last > i {
    background-position: 0 -181px;
}
[data-panel="tree"] .folder.empty {
    color: #999;
}
[data-panel="tree"] .tree-root > .toolbar, [data-panel="tree"] .tree-folder > .toolbar, [data-panel="tree"] .tree-only > .toolbar {
    position: absolute;
    top: 0;
    right: 0;
    display:none;
}
[data-panel="tree"] .tree-root > .toolbar > a, [data-panel="tree"] .tree-folder > .toolbar > a, [data-panel="tree"] .tree-only > .toolbar > a {
    display: inline-block;
    padding: 4px 6px;
    color: #00a0e9;
}
[data-panel="tree"] .tree-root:hover > .folder, [data-panel="tree"] .tree-folder:hover > .folder, [data-panel="tree"] .tree-only:hover > .folder {
    background-color: #fafafa;
}
[data-panel="tree"] .tree-root:hover > .toolbar, [data-panel="tree"] .tree-folder:hover > .toolbar, [data-panel="tree"] .tree-only:hover > .toolbar {
  display: block
}

<div id="groupView" class="groupView panel-body" data-panel="tree">
  <div class="tree-folder last"><b></b><a class="folder" href="/Favorite/index/0" id="0">全部[0]</a></div>
  <div class="tree-child">
    <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/0" id="0">未分组[1]</a></div>
    <div class="tree-folder"><i></i><b></b><a class="folder" href="/Favorite/index/6" id="6">客户[1]</a></div>
    <div class="tree-child">
      <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/8" id="8">西方客户[1]</a></div>
      <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/9" id="9">东方客户[0]</a></div>
    </div>
    <div class="tree-only"><i></i><a class="folder" href="/Favorite/index/13" id="13">修改分组名称[2]</a></div>
    <div class="tree-folder"><i></i><b></b><a class="folder" href="/Favorite/index/16" id="16">计算机[0]</a></div>
    <div class="tree-child">
      <div class="tree-only"><i></i><a class="folder empty" href="/Favorite/index/17" id="17">硬件工程师[0]</a></div>
      <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/18" id="18">软件工程师[0]</a></div>
    </div>
    <div class="tree-only last"><i></i><a class="folder empty" href="/Favorite/index/40" id="40">最新添加[0]</a></div>
  </div>
</div>

tree_icon.png图片地址：http://img.blog.csdn.net/20160424123943829

tree_line.png图片地址：http://img.blog.csdn.net/20160424123959314

分析HTML代码结果