1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
  7.         <script type=text/javascript charset=utf-8>
  8.                 // 门面模式的概念:简化API接口 最经典的就是事件
  9.                 // 做一件事情： 必须要调用2个函数分别是 a , b
  10.                 /*
  11.                 function a(x){
  12.                 }
  13.                 function b(y){
  14.                 }
  15.                 function ab(x , y){
  16.                     a(x);
  17.                     b(y);
  18.                 }
  19.                 */
  20.  
  21.                 // 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置css样式
  22.                 // 需求发生变化：同时设置几个元素的css样式
  23.                 window.onload= function(){
  24.                     // 给一个元素设置一个样式
  25.                     var element = document.getElementById('div1');
  26.                     element.style.color = 'red';
  27.  
  28.                     // 给多个元素设置同样的样式
  29.                     setStyle(['div1','div2','div3'],'color' , 'blue');
  30.  
  31.                     // 给多个元素设置多种样式
  32.                     setCss(['div1','div2','div3'],{
  33.                         position:'absolute' ,
  34.                         background:'green' ,
  35.                         fontSize: '18px' ,
  36.                         left:'100px'
  37.                     });
  38.  
  39.                 };
  40.                 //简单的门面模式
  41.                 function setStyle(elementsId,prop,val){
  42.                     for(var i=0;i<elementsId.length;i++){
  43.                         document.getElementById(elementsId[i]).style[prop] = val ;
  44.                     }
  45.                 }
  46.                 //门面模式的css方法
  47.                 function setCss(elementsId,options){
  48.                     for(var prop in options){
  49.                         if(!options.hasOwnProperty(prop)) continue;
  50.                         setStyle(elementsId,prop,options[prop]);
  51.                     }
  52.                 }
  53.  
  54.         </script>
  55.     </head>
  56.     <body>
  57.         <div id="div1" >我是div1</div>
  58.         <div id="div2" >我是div2</div>
  59.         <div id="div3" >我是div3</div>
  60.     </body>
  61. </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. 帆软FineBI试用

    FineBI是帆软软件有限公司推出的一款商业智能(Business Intelligence)产品,FineBI的本质是通过分析企业已有的信息化数据,帮助企业发现并解决存在的问题,预测模拟企业将来的发 ...

  2. Oracle基础入门(三)

    一:PLsql一些基本操作 调节plsql的字体大小 二:创建表,如果学过sql server的数据库就会发现其实Oracle跟的一些新建表和新增修改其实是差不多的 新建表 Create table ...

  3. #ifdef__cplusplus

    百度知道: 一般用于将C++代码以标准C形式输出(即以C的形式被调用),这是因为C++虽然常被认为是C的超集,但是C++的编译器还是与C的编译器不同的.C中调用C++中的代码这样定义会是安全的. 一般 ...

  4. linux下oracle11G DG搭建（三）：环绕备库搭建操作

    linux下oracle11G DG搭建(三):环绕备库搭建操作 环境 名称 主库 备库 主机名 bjsrv shsrv 软件版本号 RedHat Enterprise5.5.Oracle 11g 1 ...

  5. 【POJ 2195】 Going Home（KM算法求最小权匹配）

    [POJ 2195] Going Home(KM算法求最小权匹配) Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submiss ...

  6. zzulioj--1801--xue姐的小动物(水题)

    1801: xue姐的小动物 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 594  Solved: 168 SubmitStatusWeb Boar ...

  7. 关于Javascript的forEach 和 map

    本篇博客转载自 https://blog.fundebug.com/2018/02/05/map_vs_foreach/ 如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的方法 ...

  8. Aizu - 2555 Everlasting Zero 模拟

    Aizu - 2555 Everlasting Zero 题意:学习技能,每个技能有不同的要求,问能否学习全部特殊技能 思路:枚举每两个技能,得到他们的先后学习关系,如果两个都不能先学的话就是No了, ...

  9. 有关error PRJ0003错误的思考

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事遇到两个编译错误: 项目: error PRJ0003 : 生成"rc.exe"时出错. ...

  10. flex 光标(CursorManager)

    flex 光标(CursorManager)  CursorManager相关属性   getInstance():ICursorManager AIR 应用程序中的每个 mx.core.Window ...