【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代码中找到一些规律，从图中看几个框框：

第一个红色的内的第一个元素标签div.tree-child, 红框外距离红框最近的一个元素是div.tree-folder.
通过这个红框来看，我们不难分析出粉红框 和黑框内的代码和红框的是相似的。

我们在来看看还有没有其它的规律,
也许你已经看出来了一个了，有的div的class属性值是tree-only而有的是tree-only last，他们的区别是什么呢？
通过下图来看，带圈的是表示是有last选择器的。



通过HTML代码可以看出图片上有四个last选择器，而我们通过这张图片只看出三个。 想知道原因请看下图


原本通过代码看到的应该是这张图片，原因我不希望第一个节点元素显示它前面的那个节点图片，所以我们是通过程序控制掉了它。

我们来看下一张图片，红框里的代码是<b></b>，我们再看一下其它的div.tree-folder元素内的第一个元素怎么是<i></i>呢？第二元素才是<b></b>，原因很简单，<i></i>显示的是节点图片。原因我不希望显示第一个节点图片，所以我们就没有把它添加到DOM元素中.

那么我们再来找下一个规律：我们看一下HTML代码又发现一个那就是div中有带empty的，有的就不带empty，empty是空的意思，在这里说明没有数据。它是在效果中那里体现的呢？请看一下图

大家明白了吗？，这个红框里的代码是带有empty选择器的元素。empty是用来控制是否有数据的样式。这些都是通过js来控制的。

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

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

标签：

原文地址：http://blog.csdn.net/itpinpai/article/details/51232791