门面模式

两个作用：

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>

JavaScript高级---门面模式设计的更多相关文章

  1. JavaScript高级---组合模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  2. JavaScript高级---桥模式设计

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. 读书笔记之 - javascript 设计模式 - 门面模式

    门面模式有俩个作用: 简化类的接口 消除类与使用它的客户代码之间的耦合 在javascript中,门面模式常常是开发人员最亲密的朋友.它是几乎所有javascript库的核心原则,门面模式可以使库提供 ...

  4. JavaScript设计模式--门面模式

    外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系 ...

  5. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  6. javascript闭包(Module模式)的用途和高级使用方式

    javascript闭包(Module模式)的用途和高级使用方式 javascript闭包的用途:1. 匿名自执行函数:或者可以理解为,避免污染全局变量2. 缓存:源于闭包的核心特性便是保存状态,应用 ...

  7. JavaScript设计模式-12.门面模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 【读书笔记】读《JavaScript设计模式》之门面模式

    一.前言 门面模式,也称Facade(外观)模式.核心的两点作用—— 1> 简化类的接口(让接口变得更加容易理解.容易应用.更加符合对应业务),来掩盖一个非常不同或者复杂的实现 2> 消除 ...

  9. JavaScript设计模式(6)-门面模式

    门面模式 门面模式(Facade Pattern):他隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口.这种类型的设计模式属于结构性模式.为子系统中的一组接口提供了一个统一的访问接口,这个接 ...

随机推荐

  1. S（tuple）类及可选（Optional）类型型

    元组将多个值组合为单个值.元组内的值可以是任意 类型,各元素不必是相同的类型.元组在作为函数返 回值时尤其有用. 1.定义方法1 let http404Error= (404,"Not Fo ...

  2. c#实现数据集合转换为csv文本

    需求 1.将一个数据集合导出到一个csv文件中,集合类型可以视为 List<T>,T为任意类型,T包含多个属性,可指定部分属性进行导出 2.软件中有多种不同类型的数据类型需要进行导出 需求 ...

  3. UI3_UITableViewDelete(多选)

    // AppDelegate.m // UI3_UITableViewDelete(多选) // // Created by zhangxueming on 15/7/14. // Copyright ...

  4. 不容错过的七个jQuery图片滑块插件

    1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这 ...

  5. 10款很酷的HTML5动画和实用应用 有源码

    10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...

  6. 【转】Javascript 中的false,零值,null,undefined和空字符串对象

    js 开发中经常会碰到判断是否为空的情况,关于 null 和 undefined 的区别了解的不是很好,刚好看见这篇文章,转过来学习一下,以下是转载正文: 在Javascript中,我们经常会接触到题 ...

  7. IOS数据解析JSON

    //非原创 作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此“http://www.bejson.com/”网站来进行JSO ...

  8. linux gd库不支持jpeg解决办法

    1. 查看gd库是否支持jpeg gd_info(); 2. 如果JPEG Support 不为1则不支持. 3.首先下载 libjpeg http://www.ijg.org/ ,进行安装 安装目录 ...

  9. Global::time2StrHHMM_DNT

    /*************************************************** Created Date: 13 Jul 2013 Created By: Jimmy Xie ...

  10. R简易入门（一）

    本文内容来源:https://www.dataquest.io/mission/126/introduction-to-r 本文数据来源:https://www.whitehouse.gov/21st ...