门面模式

两个作用：

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. JVM内存分配

    内存分配:当JVM运行起来的时候就会给内存划分空间,那么这块空间称之为运行时数据区.(备注:当一个Java源程序编译成class字节码文件之后,字节码文件里存放的都是二进制的汇编命令,当程序运行的时候 ...

  2. 转帖：使用TortoiseGit处理代码冲突

    原址:http://www.cnblogs.com/jason-beijing/p/5718190.html   场景一  user0 有新提交 user1 没有pull -> 写新代码 -&g ...

  3. <linux下sysctl指令详解>

    Sysctl指令是对系统核心参数的设置: 用法: -a 参数列出系统中所有核心设置 当然了这些核心的设置都是文件,存放于/proc/sys/net目录下. 举个有代表性的例子: net.ipv4.ic ...

  4. 20130909QA整理笔记

    做项目里遇到的一些问题!! 1.滚动条样式 webkit可以使用css来调节滚动条样式: http://www.cnblogs.com/rubylouvre/archive/2011/03/01/19 ...

  5. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  6. JS定时器实例解析

    在javascritp中,有两个关于定时器的专用函数. 分别为:1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  7. 用cookie实现localstorage功能

    在项目中需要利用到html5的localstorage.但在利用这个属性的时候却发现无法达到预定目标.经过不断的检查及排除,最后发现原因所在: 项目中使用的浏览器是支持localstorage的,但是 ...

  8. @RenderSection与@RenderBody

    _LayoutMain: <html> <head> @RenderSection("head") </head> <body> @ ...

  9. ASP.NET从数据库中取出数据，有数据的复选框为选中

    在KS系统中在更新菜单的时候,当查出菜单的时候要查出菜单下面已经有了哪些界面了我用了一下的方法弄的.代码如下: 界面代码: <%@ Page Language="C#" Au ...

  10. 在IOS中使用json

    1.从https://github.com/stig/json-framework/中下载json框架:json-framework 2.解压下载的包,将class文件夹下的所有文件导入到当前工程下. ...