js--27门面模式
<!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门面模式的更多相关文章
- js设计模式-门面模式
适用场景:门面模式在DOM脚本编程这种需要对各种不一致的浏览器接口的环境中很常用. 例子:阻止模式事件 var DED = widow.DED || {}; DED.util = { stopProp ...
- 大熊君说说JS与设计模式之（门面模式Facade）迪米特法则的救赎篇------（监狱的故事）
一,总体概要 1,笔者浅谈 说起“门面”这个设计模式其实不论新老程序猿都是在无意中就已经运用到此模式了,就像我们美丽的JS程序员一样不经意就使用了闭包处理问题, function Employee(n ...
- JS设计模式——10.门面模式
门面模式 这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用.它可以让程序员过得更轻松,使他们的代码变得更容易管理. 门面模式有两个作用: 简化类的接口 消除与使用她的客户代码之间的耦 ...
- JS门面模式
门面模式 前言 门面模式的本质是实现一个简单的同一接口来处理对各个子系统接口的处理和调用.和桥接模式不同的是:桥接模式中的各个类是全然独立的,桥接模式仅仅在必要的时候将这些类关联起来. 门面模式则有点 ...
- 【读书笔记】读《JavaScript设计模式》之门面模式
一.前言 门面模式,也称Facade(外观)模式.核心的两点作用—— 1> 简化类的接口(让接口变得更加容易理解.容易应用.更加符合对应业务),来掩盖一个非常不同或者复杂的实现 2> 消除 ...
- javaEE设计模式——门面模式
1.本节内容 门面模式的意图介绍 门面模式带来的好处 门面模式的应用场景 实现模式的3中方式:POJO.无状态与有状态回话Bean门面 有状态与无状态回话Bean门面的重要差别 关于门面模式使用的警告 ...
- 门面模式的典型应用 Socket 和 Http（post，get）、TCP/IP 协议的关系总结
门面模式的一个典型应用:Socket 套接字(Socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: 连接使用的 ...
- FacadePattern(门面模式)
/** * 外观模式(门面模式) * @author TMAC-J * 外观模式是通过访问一个前台来实现对子系统的访问,其和代理模式的区别是 * 代理模式是通过代理一个类的形式,也就是说一对一的关系 ...
- Tomcat源代码-门面模式(Facade)
从Tomcat源码提炼出设计模式-门面设计模式: 概念 外部访问内部,耦合度增加,不利于扩展.而门面模式在内部基础上进行再度封装,只提供外部想要的方法.这时访问方式由“外部---内部”变为了“外部-- ...
随机推荐
- 紫书 例题 10-6 UVa 1635 （二项式定理+唯一分解定理）
首先可以发现按照题目的算法最后得出来是一个杨辉三角 如果ai的系数是m的倍数,那么i即为答案 因为这个系数可能很大,而我们只需要判断倍数 所以我们就把m分解质因数,然后判断每一个系数 的质因数的幂是不 ...
- Unity 获得Android Context上下文
1.获取Context AndroidJavaObject context = new AndroidJavaClass ("com.unity3d.player.UnityPlayer&q ...
- ArcGIS api for javascript——地理处理任务-瓶中信
描述 如果在海洋中丢下一个瓶子,本例使用颗粒追踪模型显示指定的天数后瓶子在的地方.首先,输入一个追踪瓶子的天数.然后单击按钮并在海洋里的任意地方画一个点来开始模型.几秒以后将看到一条线出现描述瓶子将去 ...
- 可穿戴KEY带来的身份认证的革命
在用户身份认证方面,PKI体系给出了极好的解决方式.即基于X.509数字证书的用户身份认证.该方法基于非对称公钥算法的难题为用户提供非常安全的认证过程. PKI体系尽管明白要求"私钥必须保密 ...
- 安装Signavio Web设计器
在Jbpm3版本号中,这个著名的开源项目并没有基于浏览器的图形化流程设计器,结果导致流程设计一直停留在CS阶段. 比方我之前做过的一个OA项目.项目中採用的就是Jbpm3.因为它不支持在浏览器中的图形 ...
- 网易2016研发project师笔试题
网易2016研发project师笔试题 2015/12/9 11:25(网上收集整理的,參考答案在后面,若有错误请大神指出) 1. 运行指令find / -name "test.c" ...
- hdoj--1034--Hidden String（dfs）
Hidden String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- html 下载文件代码
首先在html中加个a标签 <a class="menu" href="/cmdb/file_down" download="ljctest.t ...
- C# 从磁盘中读取文件
读取txt文件 ------读取的数据比较小的时候: 如果你要读取的文件内容不是很多,可以使用 File.ReadAllText(filePath) 或指定编码方式 File.ReadAllText( ...
- How Javascript works (Javascript工作原理) (十一) 渲染引擎及性能优化小技巧
个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree ----| |----> RenderTree CSSOMtree ----| ...