门面模式

两个作用：

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. sql 批量操作（存在的更新，不存在的插入）

    标签: sql 2012-09-06 18:13 2408人阅读 评论(0) 收藏 举报 分类: Sql Server(123) 版权声明:本文为博主原创文章,未经博主允许不得转载. update A ...

  2. 一次MVVM+ReactiveCocoa实践

    前言 学习MVVM和ReactiveCocoa(简称RAC)也有一段时间了,不过都仅限于看博客,一直对这两个东西很感兴趣,觉得很创新,也一直想找个机会在项目中实践一下,但是还是有一些顾虑,毕竟没有实践 ...

  3. jquery动态移除/增加onclick属性详解

     本文章给大家介绍利用jquery的removeAttr与attr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考. 要实现效果:点击链接先去掉onclick属性,3秒 ...

  4. 理解C#系列 / 核心C# / 数据类型

    数据类型 数据类型 C#把数据类型分为两种:值类型和引用类型. 值类型和引用类型 值类型的变量直接指向存储的值,引用类型的变量指向值的引用.[理解:引用就像一个柜子的号码牌,可以顺藤摸瓜找到柜子.假如 ...

  5. 推荐5个应用 jQuery 特效的精美特效

    1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...

  6. 济南学习 Day 1 T2 am

    死亡[问题描述]现在有M个位置可以打 sif,有N +1个人在排队等着打 sif.现在告诉你 个人每个人需要多长的时间打 sif,问你第N +1个人什么时候才能打 sif. (前N个人必须按照顺序来) ...

  7. Codevs 2611 观光旅游

     时间限制: 1 s 空间限制: 128000 KB 题目等级:钻石   题目描述 Description 某旅游区里面有N个景点.两个景点之间可能直接有道路相连,用a[i][j]表示它的长度,否则它 ...

  8. 1 。 LightOJ 1234 打表法（数据太大，把数据缩小100倍）

    原题链接http://acm.hust.edu.cn/vjudge/contest/121397#problem/A Description In mathematics, the nth harmo ...

  9. js动态引入的四种方式

    index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  10. Unity学习笔记(4):依赖注入

    Unity具体实现依赖注入包含构造函数注入.属性注入.方法注入,所谓注入相当赋值,下面一个一个来介绍 1:构造函数注入 1.1当类有多个构造函数时,可以通过InjectionConstructor特性 ...