javascript-组合模式

组合模式笔记

组合模式又称部分-整体模式，将对象组合成树形结构以表示'部分整体'的层次结构

组合模式使得用户对单个对象和组合对象的使用具有一致性

demo实例 ：表单模块

要调用到前面学习到的寄生组合继承方法

            //原型式继承
            function inheritobject(o){
                //声明一个过渡函数对象
                function F(){    
                }
                //过渡原型对象继承父对象
                F.prototype=o;
                //返回过渡对象的一个实列，该实例的原型继承了父对象
                return new F();
            }
            /*
             *寄生式继承 继承原型
             * 传递参数subclass 子类
             * 传递参数superclass 父类
             * */
            function inheritPrototype(subclass,superclass){
                //复制一份父类的原型副本保存在变量中
                var p=inheritobject(superclass.prototype);
                //修正因为重写子类原型导致子类的constructor属性被修改
                p.constructor=subclass;
                //设置子类原型
                subclass.prototype=p;
            }

表单 demo

  1.表单虚拟父类 Base

            //表单虚拟父类 Base
            var Base = function(){
                this.children = [];
                this.element = null;
            };
            Base.prototype = {
                init : function(){
                    throw new Error("请重写你的方法");
                },
                add : function(){
                    throw new Error("请重写你的方法");
                },
                getElement : function(){
                    throw new Error("请重写你的方法");
                }
            };

  2.FormItem容器类

          //FormItem
            var FormItem = function(id,parent){
                Base.call(this);
                this.id = id;
                this.parent = parent;
                this.init();
            };
            inheritPrototype(FormItem,Base);
            FormItem.prototype = { 
                init : function(){
                   this.element =document.createElement('form');
                   this.element.id=this.id;
                   this.element.className='new-form';
                },
                add : function(child){
                   this.children.push(child);
                   this.element.appendChild(child.getElement());
                   return this;
                },
                getElement : function(){
                   return this.element;
                },
                show : function(){
                   this.parent.appendChild(this.element);
                }
            };

 3.FieldsetItem类

            //FieldsetItem
            var FieldsetItem = function(classname,legend){
                Base.call(this);
                this.classname=classname || '';
                this.legend=legend;
                this.init();
            };
            inheritPrototype(FieldsetItem,Base);
            FieldsetItem.prototype = {
                init : function(){
                    this.element = document.createElement('fieldset');
                    var legendname = document.createElement('legend');
                    legendname.innerHTML = this.legend;
                    this.element.appendChild(legendname);
                    this.element.className='new-fieldset';
                },
                add : function(child){
                    this.children.push(child);
                    this.element.appendChild(child.getElement());
                    return this;
                },
                getElement : function(){
                    return this.element;
                },
            };

  4.Group类

           var Group = function(){
                Base.call(this);
                this.init();
            };
            inheritPrototype(Group,Base);
            Group.prototype = {
                init : function(){
                    this.element = document.createElement('div');
                    this.element.className='group';
                },
                add : function(child){
                    this.children.push(child);
                    this.element.appendChild(child.getElement());
                    return this;
                },
                getElement : function(){
                    return this.element;
                }
            };

 5.InputItem

            //InputItem
            var InputItem = function(name){
                Base.call(this);
                this.classname = name;
                this.id = name;
                this.init();
            };
            inheritPrototype(InputItem,Base);
            InputItem.prototype = {
                init : function(){
                    this.element = document.createElement('input');
                    this.element.className=this.classname;
                    this.element.id=this.id;
                },
                add : function(){
                   
                },
                getElement : function(){
                    return this.element;
                }
            };

 6.LabelItem类

            //LabelItem
            var LabelItem = function(name,nameText){
                Base.call(this);
                this.text = nameText;
                this.name = name;
                this.init();
            };
            inheritPrototype(LabelItem,Base);
            LabelItem.prototype = {
                init : function(){
                    this.element = document.createElement('label');
                    this.element.name=this.name;
                    this.element.innerHTML=this.text;
                },
                add : function(){
                   
                },
                getElement : function(){
                    return this.element;
                }
            };

 7.SpanItem类

            //SpanItem
            var SpanItem = function(warntext){
                Base.call(this);
                this.text = warntext;
                this.init();
            };
            inheritPrototype(SpanItem,Base);
            SpanItem.prototype = {
                init : function(){
                    this.element = document.createElement('span');
                    this.element.innerHTML=this.text;
                },
                add : function(){
                   
                },
                getElement : function(){
                    return this.element;
                }
            };

测试代码

            var form =new FormItem('FormItem',document.body);
            form.add(
                new FieldsetItem('account','账号').add(
                    new Group().add(
                        new LabelItem('uname','用户名：')
                    ).add(
                        new InputItem('uname')
                    ).add(
                        new SpanItem('4到6位数字或字母')
                    )
                ).add(
                    new Group().add(
                        new LabelItem('pwd','密&nbsp码：')
                    ).add(
                        new InputItem('pwd')
                    ).add(
                        new SpanItem('6到12位数字或字母')
                    )
                )
            ).add(
                new FieldsetItem('info','信息').add(
                    new Group().add(
                        new LabelItem('name','昵称：')
                    ).add(new InputItem('name'))
                ).add(
                    new Group().add(
                        new LabelItem('status','状态：')
                    ).add(
                        new InputItem('status')
                    )
                )
            ).show();

浏览器显示

生成的html代码