首页 > 代码库 > js--27门面模式

js--27门面模式

2024-09-23 21:11:22   213人阅读

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
        <script type=text/javascript charset=utf-8>
                // 门面模式的概念:简化API接口 最经典的就是事件
                // 做一件事情： 必须要调用2个函数分别是 a , b  
                /*
                function a(x){
                }
                function b(y){
                }
                function ab(x , y){
                    a(x);
                    b(y);
                }
                */
                
                // 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置css样式
                // 需求发生变化：同时设置几个元素的css样式
                window.onload= function(){
                    // 给一个元素设置一个样式
                    var element = document.getElementById(‘div1‘);
                    element.style.color = ‘red‘;
                    
                    // 给多个元素设置同样的样式
                    setStyle([‘div1‘,‘div2‘,‘div3‘],‘color‘ , ‘blue‘);
                    
                    // 给多个元素设置多种样式
                    setCss([‘div1‘,‘div2‘,‘div3‘],{
                        position:‘absolute‘ ,
                        background:‘green‘ ,
                        fontSize: ‘18px‘ ,
                        left:‘100px‘
                    });
                    
                };
                //简单的门面模式
                function setStyle(elementsId,prop,val){
                    for(var i=0;i<elementsId.length;i++){
                        document.getElementById(elementsId[i]).style[prop] = val ;
                    }
                }
                //门面模式的css方法
                function setCss(elementsId,options){
                    for(var prop in options){
                        if(!options.hasOwnProperty(prop)) continue;
                        setStyle(elementsId,prop,options[prop]);
                    }
                }
            
        </script>
    </head>
    <body>
        <div id="div1" >我是div1</div>
        <div id="div2" >我是div2</div>    
        <div id="div3" >我是div3</div>            
    </body>
</html>

 

js--27门面模式


联系
我们