码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-26 21:01:43      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

 

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



根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的。通过JS代码来分析如何组装HTML的


Composite类型的代码:

function TreeComposite(id, name, total, level, last) {

  var root = document.createDocumentFragment();

  var panel = document.createElement("div");
  panel.setAttribute("class", (last ? "tree-folder last" : "tree-folder"));
  var b = document.createElement("b");
  var i = document.createElement("i");

  var link = document.createElement("a");
  link.setAttribute("class", "folder");
  link.href = "#";
  link.innerHTML = name + "[" + total + "]";
  link.id = id;

  var child = document.createElement("div");
  child.setAttribute("class", "tree-child");

  if (level) {
    panel.appendChild(i);
  }
  panel.appendChild(b);
  panel.appendChild(link);
  root.appendChild(panel);
  root.appendChild(child);

  this.child = child;
  this.element = root;

}
TreeComposite.prototype = {

  addNode: function (treeNode) {
    this.child.appendChild(treeNode.getElement());

  },
  getElement: function () {
    return this.element;
  }

}

我们先来分析一下面上面的代码片段:

TreeComposite是有一个带有参数的构造函数,它需要传入四个参数:
id:当前节点的主键(交互时用到);
name:当前节点的名称;
total:当前节点下的记录条数,不是表达他的子节点哦,这里要注意一下;
level:代表树导航的深度的层次级别,越向内级别越高;
last:当前节点是否是父节点下的子节点的最后一个节点;


我们知道了构造函数中参数代表的含义,接下下我们看一下构造函数中的代码片段
首先构造函数的第一句代码是:

var root = document.createDocumentFragment();
为什么要创建一个这样的节点,而不是创建一个div元素或其它标称的元素呢?
第一点:我们希望把它下的子节点加入document文档流中,不把当前创建的节点加入进去;
第二点:在构造函数中我们是要同时添加二个子节点,不希望创建一个无用的节点,document.createDocumentFrament代表创建一个空的节点,且占用当前文档节点流,当把它给别一个节点时,它会把它下面的子节点拿出来,而不是它;

下面这二句代码表示创建一个节点DOM,
var panel = document.createElement("div");
panel.setAttribute("class", (last ? "tree-folder last" : "tree-folder"));

这二句对应的是div元素:

技术分享

下面二句代码:b表示Composite的图片,i表示是一个节点的关系图片;

 var b = document.createElement("b");  
  var i = document.createElement("i"); 

下面代码表示创建一个包含节点名称的链接DOM元素;
var link = document.createElement("a");  
  link.setAttribute("class", "folder");  
  link.href = "#";  
  link.innerHTML = name + "[" + total + "]";  
  link.id = id;  

上面有了当前节点元素了,我们还需要创建一个它的子节点的父节点元素,意思就是它的子节点都要包含在child节点中,如下代码:
 var child = document.createElement("div");  
  child.setAttribute("class", "tree-child");  

下面代码表示如果是第一层节点的话,我们不希望看到它前同有一个节点层次关系图片:
 if (level) {  
    panel.appendChild(i);  
  } 

上面我们创建了一个节点的最外层DOM(panel),这时我们要把这些创建的元素添加到panel中去,
  panel.appendChild(b);  
  panel.appendChild(link);  

下面代码是把创建的当前节点和它的子节点的父节点,包含在root中,root是一个空节点。到这里才能说明,我们为什么要用document.createDocumentFrament()它了。
  root.appendChild(panel);  
  root.appendChild(child);  

下面代码,第一句是把子节点的父节点给当前对象child属性,第二句是把root节点给当前对象element属性 ,它代表当前节点的DOM;
this.child = child;  
this.element = root;  

在TreeComposite对象的原型中还有二个方法 :

addNode: function (treeNode) {  
    this.child.appendChild(treeNode.getElement());  
  
  },  
  getElement: function () {  
    return this.element;  
  }  
原因组合模式是有“部分-整体”的层次结构的,addNode方法是把它的子节点(Composite或 Leaf)添加到这个child中去;getElement方法是获取当前对象的节点;



Leaf类型的代码:

function TreeLeaf(id, name, total, level, last) {

  var panel = document.createElement("div");
  panel.setAttribute("class", (last ? "tree-only last" : "tree-only"));
  var b = document.createElement("b");
  var i = document.createElement("i");
  var link = document.createElement("a");
  link.setAttribute("class", (total ? "folder" : "folder empty"));
  link.href = "#";
  link.innerHTML = name + "[" + total + "]";
  link.id = id;

  panel.appendChild(i);
  panel.appendChild(link);

  this.element = panel;

}
TreeLeaf.prototype = {
  addNode: function (treeNode) {
  },
  getElement: function () {
    return this.element;
  }
}


我们先来分析一下面上面的代码片段:

TreeLeaf是有一个带有参数的构造函数,它需要传入四个参数:
id:当前节点的主键(交互时用到);
name:当前节点的名称;
total:当前节点下的记录条数,不是表达他的子节点哦,这里要注意一下;
level:代表树导航的深度的层次级别,越向内级别越高;
last:当前节点是否是父节点下的子节点的最后一个节点;

TreeLeaf构造函数中的代码是和TreeComposite构造函数中的代码是相似的,大家可以根据TreeComposite构造函数中的代码讲解来对比着理解TreeLeaf构造函数中的代码;


根据上面的二个对象,我们来回忆一下上节讲到“将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。”这句话。


前半句我们可能好理解,是一种包含关系,谁包含着谁;

我们通过后半句来对应着代码来看一下

TreeComposite(组合对象)和TreeLeaf(单个对象)构造函数中参数的个数和顺序都是一样的,它们分别原型中的方法都是addNode和getElement。他用他们相同的方法;

我们希望用户忽略组合对象与单个对象的不同,用户将统一地使用组合结构中的所有对象(方法),这里的方法是组合对象和单个对象都有的方法;


下面我们写一段代码对上面的二个对象的使用:

// root节点
var treeRoot = new TreeComposite(0, "全部", 8, 0, true);

// 添加第一个节点
treeRoot.addNode(new TreeLeaf(0, "未分组", 1, 0, true));

// 这是第二个节点
var treeRoot1 = new TreeComposite(0, "客户", 5, 0, true);
// 这是第二个节点下的二个子节点 
treeRoot1.addNode(new TreeLeaf(0, "西方客户", 2, 0, true));
treeRoot1.addNode(new TreeLeaf(0, "东方客户", 0, 0, true));
// 将第二个节点添加root节点中去
treeRoot.addNode(treeRoot1);

// 这是第三个节点下的二个子节点 
treeRoot.addNode(new TreeLeaf(0, "修改分组名称", 2, 0, true));

// 这是第四个节点下的二个子节点 
var treeRoot2 = new TreeComposite(0, "计算机", 0, 0, true);
treeRoot2.addNode(new TreeLeaf(0, "硬件工程师", 0, 0, true));
treeRoot2.addNode(new TreeLeaf(0, "软件工程师", 0, 0, true));
// 将第三个节点添加root节点中去
treeRoot.addNode(treeRoot2);

// 这是第五个节点下的二个子节点 
treeRoot.addNode(new TreeLeaf(0, "最新添加", 0, 0, true));

// 最后打印出所有节点
console.log(treeRoot.getElement());

Chrome下打印的效果 :
技术分享

这一节我们是通过手动地添加元素;下一节我们讲分析根据后端人员给出一个JSON格式数据,我们如何来组装起来,下一节我们可会用到递归的概念。






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

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!