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(模板方法模式)
模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...
随机推荐
- 单链表(带random指针)深拷贝（Copy List with Random Pointer）
问题: A linked list is given such that each node contains an additional random pointer which could poi ...
- Android-MediaPlayer-视频频播放-异步准备
上两篇博客,Android-MediaPlayer-音频播放-普通准备,Android-MediaPlayer-音频播放-异步准备,主要是讲解了音频(.mp3文件)音乐
- 在Github注册账户
https://github.com/JasonHaoz
- Wpf Page间跳转传参数 And Window To Page
这段时间用到Wpf,页面间的跳转网上有不少的示例,但是有些已经不能用了,尤其是页面间的传参问题更是一大堆,但正确的解决方案却没有几个,或者说写的不清楚,让人走了很多弯路,查看官方文档后发现了正确的姿势 ...
- Katalon Studio简单使用(二)
距离上一篇更新katalon学习部分已有两个月的时间 ,我的博文的访问量为400多,(*^__^*) 嘻嘻…… 说明还是很多同学在学习这个小tools的.所以再记录下 近两个月来对katalon的体验 ...
- VUE环境安装和创建项目
1.首先要安装nodejs和npm. 下载nodejs安装,下载地址:https://nodejs.org/en/ 安装很简单一路next即可. 安装完成后可以在cmd窗口输入node -v 和 np ...
- windows挂载网络盘
@echo offset filename=%DATE:~0,4%%DATE:~5,2%%DATE:~8,2%set filename="DataBak-%filename%"ne ...
- [USACO17FEB]Why Did the Cow Cross the Road III P（CDQ分治）
题意 两列$n$的排列,相同的数连边,如果一对数有交叉且差的绝对值$>k$,则$++ans$,求$ans$ 题解 可以把每一个数字看成一个三元组$(x,y,z)$,其中$x$表示在第一列的位置, ...
- Java初学者的学习路线建议
java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...
- Oracle to_char的用法
The following are number examples for the to_char function. to_char(1210.73, '9999.9') would return ...