JavaScript设计模式-11.桥梁模式

时间:2022-07-27 22:53:39
 <!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.桥梁模式的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式11&lpar;外观模式&rpar;

    经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...

  2. JavaScript设计模式之----组合模式

    javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...

  3. JavaScript设计模式之策略模式(学习笔记)

    在网上搜索“为什么MVC不是一种设计模式呢?”其中有解答:MVC其实是三个经典设计模式的演变:观察者模式(Observer).策略模式(Strategy).组合模式(Composite).所以我今天选 ...

  4. 再起航,我的学习笔记之JavaScript设计模式08&lpar;建造者模式&rpar;

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  5. 再起航,我的学习笔记之JavaScript设计模式09&lpar;原型模式&rpar;

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

  6. 再起航,我的学习笔记之JavaScript设计模式14&lpar;桥接模式&rpar;

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

  7. 再起航,我的学习笔记之JavaScript设计模式15&lpar;组合模式&rpar;

    组合模式 组合模式(Composite): 又称部分-整体模式,将对象组合成树形结构以表示"部分整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 如果有一个 ...

  8. 再起航,我的学习笔记之JavaScript设计模式17&lpar;模板方法模式&rpar;

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  9. 再起航,我的学习笔记之JavaScript设计模式19&lpar;状态模式&rpar;

    状态模式 概念介绍 状态模式(State):当一个对象的内部状态发生改变时,会导致其行为的改变,这看起来像是改变了对象 示例演示 在我们写项目的过程中或多或少会遇到如下的多分支判断 function ...

随机推荐

  1. 反编译ILSpy 无法显式调用运算符或访问器 错误处理方法 转

    反汇编一个dll类库,导出的项目会报出很多bug,其中主要的就是“无法显式调用运算符或访问器”这个错误,看了一下,发现问题是在调用属性的时候,都 变成了方法,例如:pivotPoint.set_X(0 ...

  2. STM32单片机实现中断后不继续向下执行而是返回到main函数

    做公司的一个项目,实现一个功能就是 机器在进行一项功能时(这项工作时间挺长),想要取消这项工作,重新选择.想了半天没想出来,结果同事提醒了一句,可以在程序中加一个外部中断,在中断中软件复位程序.用到以 ...

  3. 【jpa】 引用包的问题

    Hibernate使用Annotation(注解)需加                         hibernate-jpa-2.0-api-1.0.0.Final.jar Hibernate3 ...

  4. Oracle 空间管理

    表空间:组数据文件的一种途径 分类: 目录表空间(sysaux) 常表空间(system) 系统临时表空间(temp) 用户临时表空间(user) undo表空间 创建表空间: //表空间名为name ...

  5. BZOJ 4143 The Lawyer

           这道题看起来很吓人,但事实上看懂后会发现,其根本没有任何技术含量,做这道题其实要考虑的就是每天最早结束的一场的结束时间以及最晚开始的一场的开始时间,如果结束时间早于开始时间,那么OK就这 ...

  6. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  7. Java开源博客My-Blog&lpar;SpringBoot&plus;Docker&rpar;系列文章

    My Blog 1.Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦 2.My-Blog搭建过程:如何让一个网站从零到可以上线访问 3.将数据的初始化放到 ...

  8. Java基础知识回顾之四 ----- 集合List、Map和Set

    前言 在上一篇中回顾了Java的三大特性:封装.继承和多态.本篇则来介绍下集合. 集合介绍 我们在进行Java程序开发的时候,除了最常用的基础数据类型和String对象外,也经常会用到集合相关类. 集 ...

  9. Linux 自动化部署DNS服务器

    Linux 自动化部署DNS服务器 1.首先配置主DNS服务器的IP地址,DNS地址一个写主dns的IP地址,一个写从dns的地址,这里也可以不写,在测试的时候在/etc/resolv.conf中添加 ...

  10. 解决'SQLALCHEMY&lowbar;TRACK&lowbar;MODIFICATIONS adds significant overhead and '

    懒癌晚期,直接贴图 然后就解决了!