门面模式

两个作用：

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. Cocos2d-JS中JavaScript继承

    JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  2. 异常getaddrinfo enotfound

    在看NodeJS开发指南这本书时,书中的一个例子,讲解http.request的.代码如下: var http = require('http'); var querystring = require ...

  3. 学习 AngularJS 第一天

    AngularJS 高级程序设计 遇到问题:安装web服务器 var connect = require("connect"); connect.createServer( con ...

  4. C# http下载（支持断点续传）

    分享下项目里面自己封装的一个http下载类 功能如下: 1.支持断点续传 2.下载失败自动重试 3.超时等异常处理 using System; using System.Collections.Gen ...

  5. 安装新版本的mysql数据库

    默认情况,在CentOS 6.8 下通过yum安装的是5.1.73版本,现在需求是安装5.7版本. -------------------------------------------------- ...

  6. 10.NFS V4.2

    这里只演示使用keytab,也就是客户端与服务端进行keberos进行安全验证连接(注意时间服务器要同步!如果不同步,Kerberos无法通过验证) server端:192.168.1.109 1.y ...

  7. jquery.validate.js

    jquery.validate.js使用记录 首先到JQ官网下载搜索validate插件,下载相关源码,附上validate官网网址 https://jqueryvalidation.org/ 找到v ...

  8. 【转】让iframe在iOS设备手机浏览器上支持滚动

    HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...

  9. jdbc 连接 mysql 获取 数据集 条数

    package nona; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; im ...

  10. js数组的splice方法

    w3school文章链接:http://www.w3school.com.cn/jsref/jsref_splice.asp splice:拼接,结合. splice()方法向数组添加/删除元素,返回 ...