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

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>

        <script type=text/javascript charset=utf-8>

                // 门面模式的概念:简化API接口 最经典的就是事件

                // 做一件事情： 必须要调用2个函数分别是 a , b

                /*

                function a(x){

                }

                function b(y){

                }

                function ab(x , y){

                    a(x);

                    b(y);

                }

                */

                // 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置css样式

                // 需求发生变化：同时设置几个元素的css样式

                window.onload= function(){

                    // 给一个元素设置一个样式

                    var element = document.getElementById('div1');

                    element.style.color = 'red';

                    // 给多个元素设置同样的样式

                    setStyle(['div1','div2','div3'],'color' , 'blue');

                    // 给多个元素设置多种样式

                    setCss(['div1','div2','div3'],{

                        position:'absolute' ,

                        background:'green' ,

                        fontSize: '18px' ,

                        left:'100px'

                    });

                };

                //简单的门面模式

                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>

    </head>

    <body>

        <div id="div1" >我是div1</div>

        <div id="div2" >我是div2</div>

        <div id="div3" >我是div3</div>

    </body>

</html>

js--27门面模式的更多相关文章

  1. js设计模式-门面模式

    适用场景:门面模式在DOM脚本编程这种需要对各种不一致的浏览器接口的环境中很常用. 例子:阻止模式事件 var DED = widow.DED || {}; DED.util = { stopProp ...

  2. 大熊君说说JS与设计模式之（门面模式Facade）迪米特法则的救赎篇------（监狱的故事）

    一,总体概要 1,笔者浅谈 说起“门面”这个设计模式其实不论新老程序猿都是在无意中就已经运用到此模式了,就像我们美丽的JS程序员一样不经意就使用了闭包处理问题, function Employee(n ...

  3. JS设计模式——10.门面模式

    门面模式 这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用.它可以让程序员过得更轻松,使他们的代码变得更容易管理. 门面模式有两个作用: 简化类的接口 消除与使用她的客户代码之间的耦 ...

  4. JS门面模式

    门面模式 前言 门面模式的本质是实现一个简单的同一接口来处理对各个子系统接口的处理和调用.和桥接模式不同的是:桥接模式中的各个类是全然独立的,桥接模式仅仅在必要的时候将这些类关联起来. 门面模式则有点 ...

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

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

  6. javaEE设计模式——门面模式

    1.本节内容 门面模式的意图介绍 门面模式带来的好处 门面模式的应用场景 实现模式的3中方式:POJO.无状态与有状态回话Bean门面 有状态与无状态回话Bean门面的重要差别 关于门面模式使用的警告 ...

  7. 门面模式的典型应用 Socket 和 Http（post，get）、TCP/IP 协议的关系总结

    门面模式的一个典型应用:Socket 套接字(Socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: 连接使用的 ...

  8. FacadePattern(门面模式)

    /** * 外观模式(门面模式) * @author TMAC-J * 外观模式是通过访问一个前台来实现对子系统的访问,其和代理模式的区别是 * 代理模式是通过代理一个类的形式,也就是说一对一的关系 ...

  9. Tomcat源代码-门面模式(Facade)

    从Tomcat源码提炼出设计模式-门面设计模式: 概念 外部访问内部,耦合度增加,不利于扩展.而门面模式在内部基础上进行再度封装,只提供外部想要的方法.这时访问方式由“外部---内部”变为了“外部-- ...

随机推荐

  1. 题解 P2195 【HXY造公园】

    天哪这道题竟然只有一篇题解! emm,首先读题看完两个操作就已经有很明确的思路了,显然是并查集+树的直径 一波解决. 并查集不多说了,如果不了解的可以看这里. 树的直径的思路很朴实,就是两边DFS(B ...

  2. ArcGIS api for javascript——渲染-使用分级渲染

    描述 本例使用一个分级渲染通过人口密度用符号表示Kansas.代码明确地增加类并为每一个定义颜色.使用ClassBreaksRenderer.addBreak()方法定义类,参数是在类中包含的最大值和 ...

  3. C#+ArcGIS Engine 获取地图中选中的要素

    转自 C#+ArcGIS Engine 获取地图中选中的要素 C#+ArcGIS Engine 获取地图中选中的要素 提供一种简单遍历获取地图中选中要素的方法,代码如下: List<IFeatu ...

  4. 怎样使Dialog像Activity一样随心所欲的使用？

    怎样使Dialog像Activity一样随心所欲的使用? android中的Dialog像是寄生在Activity中.在弹出Dialog时.因受到系统风格定义,导致Dialog怎么也不能如意,那么今天 ...

  5. hdu 1102 Constructing Roads(kruskal || prim)

    求最小生成树.有一点点的变化,就是有的边已经给出来了.所以,最小生成树里面必须有这些边,kruskal和prim算法都能够,prim更简单一些.有一点须要注意,用克鲁斯卡尔算法的时候须要将已经存在的边 ...

  6. ISheet ICell

    /// <summary> /// Gets the first row on the sheet /// </summary> /// <value>the nu ...

  7. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  8. codeforces 701 B. Cells Not Under Attack

    B. Cells Not Under Attack time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  9. javaScript [[scope]]学习笔记

    在javaScript 学习中,闭包肯定是一个让人头疼的问题,而闭包必定离不开[[scope]]作用域 scope存储了执行期上下文的集合 而了解scope以及scope链又是一个十分抽象的问题 我们 ...

  10. angularjs input使用ng-model双向绑定无效bug解决

    一.问题描述 当我们给input双向绑定变量的时候,使用ng-model有时候会出现无效的情况 二.解决办法 将绑定的变量写成对象的形式 控制器定义变量: $scope.inputText = {va ...