javascript-组合模式

组合模式笔记

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

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

demo实例 ：表单模块

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

 1             //原型式继承
 2             function inheritobject(o){
 3                 //声明一个过渡函数对象
 4                 function F(){    
 5                 }
 6                 //过渡原型对象继承父对象
 7                 F.prototype=o;
 8                 //返回过渡对象的一个实列，该实例的原型继承了父对象
 9                 return new F();
10             }
11             /*
12              *寄生式继承 继承原型
13              * 传递参数subclass 子类
14              * 传递参数superclass 父类
15              * */
16             function inheritPrototype(subclass,superclass){
17                 //复制一份父类的原型副本保存在变量中
18                 var p=inheritobject(superclass.prototype);
19                 //修正因为重写子类原型导致子类的constructor属性被修改
20                 p.constructor=subclass;
21                 //设置子类原型
22                 subclass.prototype=p;
23             }

表单 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容器类

 1           //FormItem
 2             var FormItem = function(id,parent){
 3                 Base.call(this);
 4                 this.id = id;
 5                 this.parent = parent;
 6                 this.init();
 7             };
 8             inheritPrototype(FormItem,Base);
 9             FormItem.prototype = { 
10                 init : function(){
11                    this.element =document.createElement('form');
12                    this.element.id=this.id;
13                    this.element.className='new-form';
14                 },
15                 add : function(child){
16                    this.children.push(child);
17                    this.element.appendChild(child.getElement());
18                    return this;
19                 },
20                 getElement : function(){
21                    return this.element;
22                 },
23                 show : function(){
24                    this.parent.appendChild(this.element);
25                 }
26             };

 3.FieldsetItem类

 1             //FieldsetItem
 2             var FieldsetItem = function(classname,legend){
 3                 Base.call(this);
 4                 this.classname=classname || '';
 5                 this.legend=legend;
 6                 this.init();
 7             };
 8             inheritPrototype(FieldsetItem,Base);
 9             FieldsetItem.prototype = {
10                 init : function(){
11                     this.element = document.createElement('fieldset');
12                     var legendname = document.createElement('legend');
13                     legendname.innerHTML = this.legend;
14                     this.element.appendChild(legendname);
15                     this.element.className='new-fieldset';
16                 },
17                 add : function(child){
18                     this.children.push(child);
19                     this.element.appendChild(child.getElement());
20                     return this;
21                 },
22                 getElement : function(){
23                     return this.element;
24                 },
25             };

  4.Group类

 1            var Group = function(){
 2                 Base.call(this);
 3                 this.init();
 4             };
 5             inheritPrototype(Group,Base);
 6             Group.prototype = {
 7                 init : function(){
 8                     this.element = document.createElement('div');
 9                     this.element.className='group';
10                 },
11                 add : function(child){
12                     this.children.push(child);
13                     this.element.appendChild(child.getElement());
14                     return this;
15                 },
16                 getElement : function(){
17                     return this.element;
18                 }
19             };

 5.InputItem

 1             //InputItem
 2             var InputItem = function(name){
 3                 Base.call(this);
 4                 this.classname = name;
 5                 this.id = name;
 6                 this.init();
 7             };
 8             inheritPrototype(InputItem,Base);
 9             InputItem.prototype = {
10                 init : function(){
11                     this.element = document.createElement('input');
12                     this.element.className=this.classname;
13                     this.element.id=this.id;
14                 },
15                 add : function(){
16                    
17                 },
18                 getElement : function(){
19                     return this.element;
20                 }
21             };

 6.LabelItem类

 1             //LabelItem
 2             var LabelItem = function(name,nameText){
 3                 Base.call(this);
 4                 this.text = nameText;
 5                 this.name = name;
 6                 this.init();
 7             };
 8             inheritPrototype(LabelItem,Base);
 9             LabelItem.prototype = {
10                 init : function(){
11                     this.element = document.createElement('label');
12                     this.element.name=this.name;
13                     this.element.innerHTML=this.text;
14                 },
15                 add : function(){
16                    
17                 },
18                 getElement : function(){
19                     return this.element;
20                 }
21             };

 7.SpanItem类

 1             //SpanItem
 2             var SpanItem = function(warntext){
 3                 Base.call(this);
 4                 this.text = warntext;
 5                 this.init();
 6             };
 7             inheritPrototype(SpanItem,Base);
 8             SpanItem.prototype = {
 9                 init : function(){
10                     this.element = document.createElement('span');
11                     this.element.innerHTML=this.text;
12                 },
13                 add : function(){
14                    
15                 },
16                 getElement : function(){
17                     return this.element;
18                 }
19             };

测试代码

 1             var form =new FormItem('FormItem',document.body);
 2             form.add(
 3                 new FieldsetItem('account','账号').add(
 4                     new Group().add(
 5                         new LabelItem('uname','用户名：')
 6                     ).add(
 7                         new InputItem('uname')
 8                     ).add(
 9                         new SpanItem('4到6位数字或字母')
10                     )
11                 ).add(
12                     new Group().add(
13                         new LabelItem('pwd','密&nbsp码：')
14                     ).add(
15                         new InputItem('pwd')
16                     ).add(
17                         new SpanItem('6到12位数字或字母')
18                     )
19                 )
20             ).add(
21                 new FieldsetItem('info','信息').add(
22                     new Group().add(
23                         new LabelItem('name','昵称：')
24                     ).add(new InputItem('name'))
25                 ).add(
26                     new Group().add(
27                         new LabelItem('status','状态：')
28                     ).add(
29                         new InputItem('status')
30                     )
31                 )
32             ).show();

浏览器显示

生成的html代码

posted on 2016-10-25 10:54  惊涛随笔  阅读(423)  评论(0)  编辑  收藏  举报

导航