javascript设计模式8

桥接模式（将抽象与其实现隔离开来，以便二者独立变化）

function sendInfo(element){
    var id=element.id;
    ajax("GET","info.json?id="+id,function(result){
        //...
    });
    //...
};

上例的ajax请求与sendInfo函数可以拆分开

function sendInfo(element){
    var id=element.id,
    callback=function(result){
        //...
    };
    sendInfoBridge(id,callback);
}
function sendInfoBridge(id,callback){
    ajax("GET","info.json?id="+id,function(result){
        callback(result);
    });
}

组合模式（用一条命令在多个对象上激发复杂的或递归的行为），组合对象和叶对象

条件一：存在一批组织成某种层次体系的对象

条件二：希望对这批对象或其中一部分对象进行操作

组合对象

var Composite=new Interface('Composite',['add','remove','getChild']);
var GalleryItem=new Interface('GalleryItem',['hide','show']);
var DynamicGallery=function(id){
    this.children=[];
    this.element=document.createElement('div');
    this.element.id=id;
    this.element.className='dynamic-gallery';
}
DynamicGallery.prototype={
    add:function(child){
        Interface.ensureImplements(child,Composite,GalleryItem);
        this.children.push(child);
        this.element.appendChild(child.getElement());
    },
    remove:function(child){
        for(var node,i=0;node=this.getChild(i);i++){
            if(node==child){
                this.children.splice(i,1);
                break;
            }
        }
        this.element.removeChild(child.getElement());
    },
    getChild:function(i){
        return this.children[i];
    },
    hide:function(){
        for(var node,i=0;node=this.getChild(i);i++){
            node.hide();
        }
        this.element.style.display='none';
    },
    show:function(){
        this.element.style.display='block';
        for(var node,i=0;node=this.getChild(i);i++){
            node.show();
        }
    },
    getElement:function(){
        return this.element;
    }
};

叶对象

var GalleryImage=function(src){
    this.element=dicument.createElement('img');
    this.element.className='gallery-image';
    this.element.src=src;
}
GalleryImage.prototype={
    add:function(){},
    remove:function(){},
    getChild:function(){},
    hide:function(){
        this.element.style.display='none';
    },
    show:function(){
        this.element.style.display='';
    },
    getElement:function(){
        return this.element;
    }
};

var topGallery=new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos=new DynamicGallery('vacation-photos');
for(var i=0;i<30;i++){
    vacationPhotos.add(new GalleryImage('/img/vac/image-'+i+'.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();