Javascript 中的 Visitor 模式 → 实现树型结构任意节点遍历................

Javascript 中的 Visitor 模式 → 实现树型结构任意节点遍历................

 1  var  Node  =   function ( nodeValue )
 2  {
 3       var  value  =  nodeValue;
 4      
 5       var  deep   =   0 ;
 6      
 7       var  childs  =   new  Array();
 8      
 9       /* * 取得深度 * */
10       this .getDeep  =   function ()
11      {
12           return  deep;
13      }
14      
15       /* * 设置深度 * */
16       this .setDeep  =   function ( nodeDeep )
17      {
18          deep  =  nodeDeep;
19      }
20 
21       /* * 获取值 * */
22       this .getValue  =   function ()
23      {
24           return  value;
25      }
26 
27       /* * 添加子节点 * */
28       this .appendChild  =   function  ( node )
29      {
30          node.setDeep( deep  +   1  );
31          childs.push( node );
32           return  node;
33      }
34 
35       /* * 所有子节点 * */
36       this .childNodes  =   function ()
37      {
38           return  childs;
39      }
40      
41       /* 是否包含子节点 */
42       this .hasChild  =   function ()
43      {
44           return  childs.length  >   0  ;
45      }
46 
47       /* 遍历 */
48       this .walk  =   function ( visitor )
49      {
50          visitor.visite(  this  );
51      }
52  }
53 
54  /*  访问者  */     
55  var  Visitor  =   function  ()
56  {
57       this .visiteResult  =   "" ;
58      
59       this .visite  =   function  ( node )
60      {
61           // window.alert( "深度 = " + node.getDeep() +  "     " + node.getValue() );
62           this .visiteResult  +=   "  深度 =&nbsp;&nbsp;&nbsp;&nbsp; "   +  node.getDeep()  +    " &nbsp;&nbsp;&nbsp;&nbsp; Value&nbsp;=&nbsp; "   +  node.getValue()  +   " <br/> " ;
63           if ( node.hasChild() )
64          {
65               this .visiteChildNodes( node );
66          }
67      }
68      
69       this .visiteChildNodes  =   function ( node )
70      {
71           var  nodes  =  node.childNodes();
72           for (  var  i  =   0  ; i  <  nodes.length ; i ++  )
73          {
74               this .visite( nodes[i] );
75          }
76      }
77  }

代码测试 :

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
 5  < title ></ title >
 6  < script  language ="javascript" >
 7  /*  遍历  */
 8  function  doWalk( startNode )
 9  {
10       var  visitor  =   new  Visitor();
11      startNode.walk( visitor );
12      document.getElementById( " VisiteResult " ).innerHTML  =  visitor.visiteResult;
13  }
14 
15  /* 初始化一些数据 */     
16  var  root  =   new  Node( " 大爷root  " );
17  var  node2  =  root.appendChild(  new  Node( " 大爷2号 " ) );
18              root.appendChild(  new  Node( " 大爷3号 " ) );
19              root.appendChild(  new  Node( " 大爷9号 " ) );
20  var  node4  =  node2.appendChild(  new  Node( " 大爷4号 " )  );
21  var  node5  =  node2.appendChild(  new  Node( " 大爷5号 " )  );
22              node2.appendChild(  new  Node( " 大爷6号 " )  );
23  node4.appendChild(  new  Node( " 大爷7号 " )  );
24  node5.appendChild(  new  Node( " 大爷8号 " )  );    
25  </ script >
26  </ head >
27 
28  < body >
29  < table  width ="60%"  align ="center" >
30       < tr >
31           < th  height ="30"  align ="center"  valign ="middle" > 左递归[深度优先遍历] </ th >
32       </ tr >
33       < tr >
34           < td  height ="30"  align ="left"  valign ="middle" >
35          var root = new Node("大爷root "); < br  />
36          var node2 = root.appendChild( new Node("大爷2号") ); < br  />
37                      root.appendChild( new Node("大爷3号") ); < br  />
38                      root.appendChild( new Node("大爷9号") ); < br  />
39          var node4 = node2.appendChild( new Node("大爷4号")  ); < br  />
40          var node5 = node2.appendChild( new Node("大爷5号")  ); < br  />
41                      node2.appendChild( new Node("大爷6号")  ); < br  />
42          node4.appendChild( new Node("大爷7号")  ); < br  />
43          node5.appendChild( new Node("大爷8号")  ); < br  />
44           </ td >
45       </ tr >
46       < tr >
47           < td  height ="50"  align ="center"  valign ="middle" >
48           < input  type ="button"  value =" 遍 历 "   onclick ="javascript:doWalk( root )"   />
49           </ td >
50       </ tr >
51       < tr >
52           < td  id ="VisiteResult"  height ="100"  align ="left"  valign ="middle" >
53           </ td >
54       </ tr >
55  </ table >
56  </ body >
57  </ html >
58 

Javascript 弱类型的好处~~  想怎么写就怎么写~ 好爽哇！ 可以不显示的实现 Visitor 和 Visitable 接口。


代码下载...........
代码下载...........
代码下载...........