js--27门面模式

<!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门面模式

最新文章

热门文章
