面向对象的Javascript（1）

Ajax让Javascript容光焕发，火得不行。当然Javascript的应用也比以往要高级得多，面向对象技术应用得也更加广泛。好久没有写过Javascript了，昨天偶尔写了一点，又记起来一些。
下面的代码为了实现一个Node，该Node可以增加、删除子节点。

     var  NodeInternal  =   ... {
        setValue: function(value)...{
            this.value = value;
        },
        getValue: function()...{
            return this.value;
        },
        addChild: function(node)...{
            this.children.push(node);
        },
        insertChild: function(index, node)...{
            if(index < 0)...{
                return ;
            }
            if(index >= this.children.length)...{
                this.children[index] = node;                
            }else...{
                for(var i=this.children.length; i>index; i--)...{
                    this.children[i] = this.children[i-1];
                }
                this.children[index] = node;
            }
        },
        removeChild: function(index)...{
            if(index >= this.children.length || index < 0)...{
                return null;
            }        
            var rt = this.children[index];
            var last = this.children.length-1;
            for(var i=index; i<last; i++)...{
                this.children[i] = this.children[i+1];
            }
            this.children.length = last;
            return rt;
        },
        getChildCount: function()...{
            return this.children.length;
        },
        toString: function()...{
            var cont = this.value + " ";            
            for(var i=0; i<this.getChildCount(); i++)...{
                cont += this.children[i].toString();
            }
            return cont;
        }
    } ;
        //构造函数，设置数组。
     function  Node() ... {
        this.children = [];      //数组的简写
    }
     // //设置prototype,从而加入NodeInternal中的方法
    Node.prototype  =  NodeInternal;

     function  test(size) ... {
        var a = [];
        var count = 4;
        for(var i=0; i<size; i++)...{
            var n1 = new Node();
            n1.setValue(i);    
            for(var j=0; j<count; j++)...{
                var c = new Node();
                c.setValue(i + "_" + j);
                n1.addChild(c);
            }
            a.push(n1);
        }
        for(var i=0; i<size; i++)...{
            a[i].removeChild(i);
            var c = new Node();
            c.setValue(i + "_insert");
            a[i].insertChild(i, c);
            alert(a[i].toString());
        }        
    }

 
下面测试一下test方法。

< button  onclick ="test(2);" > test </ button >

试一下：<script type="text/javascript"> var NodeInternal = { setValue: function(value){ this.value = value; }, getValue: function(){ return this.value; }, addChild: function(node){ this.children.push(node); }, insertChild: function(index, node){ if(index < 0){ return ; } if(index >= this.children.length){ this.children[index] = node; }else{ for(var i=this.children.length; i>index; i--){ this.children[i] = this.children[i-1]; } this.children[index] = node; } }, removeChild: function(index){ if(index >= this.children.length || index < 0){ return null; } var rt = this.children[index]; var last = this.children.length-1; for(var i=index; i test
结果如下：
---------------------------
0
0_insert
0_1
0_2
0_3
---------------------------
1
1_0
1_insert
1_2
1_3
---------------------------
当然在用面向对象的时候还可以采用下面这种方法：

     function  Node() ... {
        this.children = [];
        this.setValue = function(value)...{
            this.value = value;
        };
        this.getValue = function()...{
            return this.value;
        };
        this.addChild = function(node)...{
            this.children.push(node);
        };
        this.insertChild = function(index, node)...{
            if(index < 0)...{
                return ;
            }
            if(index >= this.children.length)...{
                this.children[index] = node;                
            }else...{
                for(var i=this.children.length; i>index; i--)...{
                    this.children[i] = this.children[i-1];
                }
                this.children[index] = node;
            }
        };
        this.removeChild = function(index)...{
            if(index >= this.children.length || index < 0)...{
                return null;
            }        
            var rt = this.children[index];
            var last = this.children.length-1;
            for(var i=index; i<last; i++)...{
                this.children[i] = this.children[i+1];
            }
            this.children.length = last;
            return rt;
        };
        this.getChildCount = function()...{
            return this.children.length;
        };
        this.toString = function()...{
            var cont = this.value + " ";            
            for(var i=0; i<this.getChildCount(); i++)...{
                cont += this.children[i].toString();
            }
            return cont;
        }
    } ;

两种方法的不同是，前者利用了js中的prototype属性，而后者则是直接给对象赋予内容。后者的每次new一个Node的时候都会执行所有Node构造函数中的代码，而前者都是公用prototype中的方法。prototype属性是js中很重要的概念，也是实现继承的关键。
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>