JavaScript design mode 8

Bridging mode (isolates abstraction from its implementation so that they vary independently)

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

The above example Ajax request and Sendinfo function can be split apart

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);    });}

Combined mode (a command that fires complex or recursive behavior on multiple objects), combining objects and leaf objects

Condition One: There is a group of objects organized into some hierarchical system

Condition Two: You want to manipulate this batch of objects or some of them

Group objects

varComposite=NewInterface (' Composite ', [' Add ', ' Remove ', ' getchild ']);vargalleryitem=NewInterface (' Galleryitem ', [' Hide ', ' show ']);vardynamicgallery=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(varNode,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(varNode,i=0;node= This. Getchild (i); i++) {node.hide (); }         This. element.style.display= ' None '; }, Show:function(){         This. element.style.display= ' Block ';  for(varNode,i=0;node= This. Getchild (i); i++) {node.show (); }}, GetElement:function(){        return  This. Element; }};

Leaf Object

varGalleryimage=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; }};

vartopgallery=NewDynamicgallery (' Top-gallery '); Topgallery.add (NewGalleryimage ('/img/image-1.jpg ')); Topgallery.add (NewGalleryimage ('/img/image-2.jpg ')); Topgallery.add (NewGalleryimage ('/img/image-3.jpg '));varvacationphotos=NewDynamicgallery (' Vacation-photos '); for(vari=0;i<30;i++) {Vacationphotos.add (NewGalleryimage ('/img/vac/image-' +i+ '. jpg '));} Topgallery.add (Vacationphotos); Topgallery.show (); Vacationphotos.hide ();

JavaScript design mode 8