JavaScript高级---门面模式设计

时间：2022-09-04 13:11:06

门面模式

两个作用：

1、简化类的接口

2、消除类与使用它的客户代码之间的耦合

门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则

门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要就是简化开发的复杂性，提供一个相对容易的API去调用内部的方法供外界去使用，这样程序员开发会变得轻松些，编写一次组合代码后可以反复的去使用它，有助于节省时间和精力

注意：

不要滥用门面模式，所以使用你心仪的门面之前一定要三思而定，搞不好你就会小题大做

引入概念：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>门面模式设计</title>
    <!--
    @theme: javascript高级 门面模式设计
    @autor：EthanCoco
    @date：2015-11-22
    @email：lijianlin0204@163.com
    -->
</head>
<body>
    <script type=text/javascript charset=utf-8>
    /*********************************************************/
    //第一个示例引入

    //首先，我们定义两个函数 a,b 平常的话我们要调用这两个函数，就会是分别调用函数a,然后调用b
    //如果我需要做一件事 ：必须要同时调用a，b
    //我就可以通过一个API来调用a和b函数就可以，这就是一个简单的门面模式
    /*
    function a(x){
        //do something
    }
    function b(y){
        //do something
    }
    function ab(x,y){
        a(x);
        b(y);
    }
    */
    //我们只需要调用ab()函数就可以实现a，b的实现
    /*********************************************************/
    </script>
</body>
</html>

示例解说：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>门面模式设计</title>
</head>
<body>
    <script type=text/javascript charset=utf-8>
    /*********************************************************/
    //现在有个需求：获得页面上的元素，并且给得到的样式设置css样式
    //通常做法很简单 如下：
    //我在页面上写了三个div
    window.onload = function(){
        //如果需要三个div的颜色都变成红色。我们需要些三个如下的类似代码
        var ele = document.getElementById("div1");
        ele.style.color = 'red';
        var ele = document.getElementById("div2");
        ele.style.color = 'red';
        var ele = document.getElementById("div2");
        ele.style.color = 'red';
    };
    </script>
    <div id="div1" >我是div1</div><br/>
    <div id="div2" >我是div2</div><br/>
    <div id="div3" >我是div3</div>
</body>
</html>

这样做会方法代码相似重复，非常不好，我们通过门面模式来设计就非常实用啦！

如下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>门面模式设计</title>
</head>
<body>
    <script type=text/javascript charset=utf-8>
    /*********************************************************/
    //示例2
    //现在有个需求：获得页面上的元素，并且给得到的样式设置css样式
    //我在页面上写了三个div

    window.onload = function(){
        //使用门面模式设置多个元素多种样式
        //可以调用setStyle方法来设置多种样式
        setStyle(['div1','div2','div3'],'color','blue');
    };
    //简单的门面模式
    function setStyle(elementsId,prop,val){
        for(var i=0;i<elementsId.length;i++){
            document.getElementById(elementsId[i]).style[prop] = val ;
        }
    }
    </script>
    <div id="div1" >我是div1</div><br/>
    <div id="div2" >我是div2</div><br/>
    <div id="div3" >我是div3</div>
</body>
</html>

继续深入：如果需求发生变更 ：“给多个元素设置多种样式”

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>门面模式设计</title>
    <!--
    @theme: javascript高级 门面模式设计
    @autor：EthanCoco
    @date：2015-11-22
    @email：lijianlin0204@163.com
    -->
</head>
<body>
    <script type=text/javascript charset=utf-8>
    //门面模式设计
    /*********************************************************/
    //现在有个需求：获得页面上的元素，并且给得到的样式设置css样式
    window.onload = function(){
        setCss(['div1','div2','div3'],{
            height : '200px',
            width :'300px',
            background:'green' ,
            fontSize: '18px'
        });

    };
    //简单的门面模式
    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>
    <div id="div1" >我是div1</div><br/>
    <div id="div2" >我是div2</div><br/>
    <div id="div3" >我是div3</div>
</body>
</html>

门面模式的作用要记住，什么时候需要用，不可以乱用，否则就贻笑大方了！

附上整个源码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>门面模式设计</title>
    <!--
    @theme: javascript高级 组合模式设计
    @autor：EthanCoco
    @date：2015-11-22
    @email：lijianlin0204@163.com
    -->
</head>
<body>
    <script type=text/javascript charset=utf-8>

    //门面模式设计
    //两个作用：
    //1 简化类的接口
    //2 消除类与使用它的客户代码之间的耦合

    //门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则。

    /*********************************************************/
    //第一个示例引入

    //首先，我们定义两个函数 a,b 平常的话我们要调用这两个函数，就会是分别调用函数a,然后调用b
    //如果我需要做一件事 ：必须要同时调用a，b
    //我就可以通过一个API来调用a和b函数就可以，这就是一个简单的门面模式
    /*
    function a(x){
        //do something
    }
    function b(y){
        //do something
    }
    function ab(x,y){
        a(x);
        b(y);
    }
    */
    //我们只需要调用ab()函数就可以实现a，b的实现
    /*********************************************************/

    /*********************************************************/
    //示例2
    //现在有个需求：获得页面上的元素，并且给得到的样式设置css样式
    //通常做法很简单 如下：
    //我在页面上写了三个div

    window.onload = function(){
        /*
        //如果需要三个div的颜色都变成红色。我们需要些三个如下的类似代码
        var ele = document.getElementById("div1");
        ele.style.color = 'red';
        var ele = document.getElementById("div2");
        ele.style.color = 'red';
        var ele = document.getElementById("div2");
        ele.style.color = 'red';
        */
        //使用门面模式设置多个元素多种样式
        //可以调用setStyle方法来设置多种样式
        //setStyle(['div1','div2','div3'],'color','blue');
        // 给多个元素设置多种样式
        setCss(['div1','div2','div3'],{
            height : '200px',
            width :'300px',
            background:'green' ,
            fontSize: '18px'
        });

    };
    //简单的门面模式
    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>
    <div id="div1" >我是div1</div><br/>
    <div id="div2" >我是div2</div><br/>
    <div id="div3" >我是div3</div>
</body>
</html>

相关文章