JavaScript设计模式-11.桥梁模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript高级语法11-桥梁模式</title>
</head>
<body>
<script>
/*桥梁模式：把将抽象与实现隔离开来，以便两者单独的变化。
* 这种模式对于javascript中常见的事件驱动编程有很大好处。
*/ //自己的类库
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn] = function(){
obj["e"+type+fn]();
}
obj.attachEvent("on"+type,obj[type+fn]);
}else{
obj["on"+type] = obj["e"+type+fn];
}
} function demo1(){
//一个页面选择宠物的例子
button.addEvent(element,"click",getPetByName);
function getPetByName(e){
var id = this.id;
asyncRequest("GET","pet.action?id="+id,function(pet){
console.log("request pet" + pet.responseText)
})
}
/*上面的做法是你在页面有一个按钮，单击会出发后面请求
* 如果要进行单元测试：1.用户登录 2.找到你的这个页面 3.单击按钮
* 如果需要进行效能层次上的单元测试，是很难进行并发测试的。
*/
//第二种做法 用简单的桥梁模式来解决
function getPetByName(id,callback){
var id = this.id;
asyncRequest("GET","pet.action?id="+id,function(pet){
callback(pet);
})
}
//定义一个桥梁将抽象和实现相互联系在一起
addEvent(element,"click",getPetByNameBridge);
function getPetByNameBridge(){
getPetByName(this.id,function(pet){
console.log("request pet" + pet.responseText);
})
}
/*这种做法使API和展现层完全分离
* API和展现层可以灵活变动。
* 这个模式在Extjs项目开发时候非常的常用。
*
* 桥梁模式的其他用途：
* 特权函数：当你的接口过于复杂的时候，把原本复杂的接口用桥梁的模式抽取出一大部分函数整合起来
* 使之客户端更容易的调用。
*/ }
// demo1();//demo1是伪代码 demo2是实例 function demo2(){
// 特权函数
var p= function(){
var add=function(){
//进行复杂的数学操作
}
//这是一个信息全封闭的类，它的内部进行复杂的业务操作
//建立一个特权函数，让它调用起来更方便
this.bridge = function(){
return {
bridgeAdd:function(){
//执行前
add(3,3)
//执行后
}
}
}
} //桥梁还可以把多个类进行桥接(链接)
var class1 = function(a,b){
this.a = a;
this.b = b;
}
var class2 = function(c,d){
this.c = c;
this.d = d;
}
var bridgeClass = function(){
this.one = new class1(1,2);
this.two = new class2(3,4);
}
/*问，这个理念不是门面模式吗？
* 不是，他的目的是在于class1和class2能独立的修改，使之完全松耦合。
* 而门面模式的意义在于调用的方便。
*/ } </script>
</body>
</html>
JavaScript设计模式-11.桥梁模式的更多相关文章
- 再起航，我的学习笔记之JavaScript设计模式11(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
- JavaScript设计模式之----组合模式
javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...
- 从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...
- JavaScript设计模式之策略模式（学习笔记）
在网上搜索“为什么MVC不是一种设计模式呢?”其中有解答:MVC其实是三个经典设计模式的演变:观察者模式(Observer).策略模式(Strategy).组合模式(Composite).所以我今天选 ...
- 再起航，我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航，我的学习笔记之JavaScript设计模式09(原型模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 再起航，我的学习笔记之JavaScript设计模式14(桥接模式)
桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...
- 再起航，我的学习笔记之JavaScript设计模式15(组合模式)
组合模式 组合模式(Composite): 又称部分-整体模式,将对象组合成树形结构以表示"部分整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 如果有一个 ...
- 再起航，我的学习笔记之JavaScript设计模式17(模板方法模式)
模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...
随机推荐
- 机器学习—集成学习（XGBoost）
一.原理部分: 二.xgboost实现 看看大神的博客瞬间了解:https://blog.csdn.net/han_xiaoyang/article/details/52665396
- 6、Docker Image
6.1 什么是image 文件和meta data的集合(root filesystem) 分层的,并且每一层都可以添加.改变.删除文件,成为一个新的image 不同的image可以共享相同的laye ...
- 疑难杂症--在Windows Server 2008 R2上运行SQL Server 2008情况下，CPU过多导致的问题
64位的Windows7和Windows Server 2008 R2为了能够在一台机器上,支持超过64个逻辑CPU, 引入了Processor Group这个概念.Processor Group会把 ...
- 操作XDocument讲解
1.首先建立好XML .可以通选自定义EXCEL导出XML格式的数据:(如图) 2 读取XML 文件 具体的详细讲解 可以查看 改网址 :https://blog.csdn.net/dyllove98 ...
- ES6——Symbol数据类型
什么是 Symbol ? Symbol 表示独一无二的值,他是js中的 第七种数据类型. 基本的数据类型:null, undefined number boolean string symbol 引用 ...
- Android Studio如何用真机调试
1,在真机中设置USB调试模式打开,具体:“设置”->“应用程序”->“开发”->“USB调试”. 2,安装安卓的USB驱动,如果按照不好,那么去下载一个豌豆荚,它会帮你正确安装你的 ...
- 【ocp-12c】最新Oracle OCP-071考试题库（39题）
39.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. You w ...
- 【OCP|052】OCP 11g最新考题收集整理-第6题
6.You are installing Oracle Grid Infrastructure by using the Oracle Universal Installer (OUI). You s ...
- JavaScript多个h5播放器video，点击一个播放其他暂停
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python获取aliyun ECS实例
#!/usr/bin/env python #-*- coding:utf-8 -*- # Description : get ecs from aliyun # Author : quke # Da ...