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代码