<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Untitled Document</title> <Scripttype=text/javascriptCharSet=utf-8src=.. /commons/commonutil.js></Script> <Scripttype=text/javascriptCharSet=utf-8> //The concept of façade mode: Simplifying API interfaces The classic is the event //do one thing: 2 functions must be called a, b /*function A (x) {} function B (y) {} function AB (x, y) {a (x); b (y); } */ //Now there is a simple requirement: Get elements on the page to get the elements set CSS style //Changes in requirements: CSS styles for several elements at the same timewindow.onload= function(){ //set a style for an element varelement=document.getElementById ('Div1'); Element.style.color= 'Red'; //set the same style for multiple elementsSetStyle (['Div1','Div2','Div3'],'Color' , 'Blue'); //set various styles for multiple elementsSetcss (['Div1','Div2','Div3'],{Position:'Absolute', background:'Green', FontSize:'18px', left:'100px' }); }; //Simple Façade mode functionSetStyle (elementsid,prop,val) { for(varI=0; I<Elementsid.length;i++) {document.getElementById (Elementsid[i]). Style[prop]=Val; } } //CSS method for façade mode functionSetcss (elementsid,options) { for(varpropinchoptions) { if(!Options.hasownproperty (prop))Continue; SetStyle (Elementsid,prop,options[prop]); } } </Script> </Head> <Body> <DivID= "Div1" >I'm div1.</Div> <DivID= "Div2" >I'm div2.</Div> <DivID= "Div3" >I'm div3.</Div> </Body></HTML>
js--27 Façade mode