JavaScript设计模式--桥梁模式引入操作实例分析

本文实例讲述了JavaScript设计模式--桥梁模式引入操作。分享给大家供大家参考，具体如下：

1.使用情况

（1）事件的监控

#1，利用页面的button来选择宠物的例子（思路）

button.addEvent(element,"click",getPetByBame);
  function getPetByBame(e){
    var id = this.id;
    asyncRquest("GET",'pet.action?id='+id,function(pet){
      consols.log("request pet"+pet.resopnseText)
    })
  }

#2，addEvent函数

/*obj:需要增加事件的对象
* type:事件名称
* fn:执行事件的函数
* */
function addEvent(obj,type,fn){//addEvent：为某个文档节点增加事件的方法
  if(obj.addEventListener){//Mozilla中：
    obj.addEventListener(type,fn,false);
  }else if(obj.attachEvent){//IE中：
    obj["e"+type+fn] = fn;
    obj[type+fn] = function(){
      obj["e"+type+fn]()
    }
    obj.attachEvent("on"+type,fn)
  }
}

总结：该种方式对于单元测试很难进行

改进为用简单的桥梁模式来解决

#1，后台中的api

function getPetByBame(id,callBack){
    sayncRquest("GET",'url?id='+id,function(pet){
      callBack(pet)
    })

#2,桥梁

//定义一个桥梁叫抽象和实现相互联系在一起
  addEvent(element,"click",getPetByNameBridge)
  function getPetByNameBridge(){
    getPetByBame(this.id,function(pet){
      consols.log("request pet"+pet.resopnseText);
    })
  }

总结：这种做法使API和展现层完全分离，API和展现层可以灵活的变动。

（2）特权函数

//特权函数
var privilege=function () {
  //信息全封闭，内部业务逻辑复杂，做成一个特权函数，使调用方便
  var complex=function (x,y) {
    //复杂的数学处理
  }

 this.bridge=function () { //提供公共接口，返回一个单体
   return {
     bridgeAdd:function () {
       //处理前
       complex(1,2);
       //处理后
     }

   }
 }
}

（3）多个类的连接

//多个类的连接
var class1=function (a,b) {
  this.a=a;
  this.b=b;
}
  var class2=function (e) {
    this.e=e;
  }
  //桥梁的连接
  var bridgeClass=function () {
    this.one=new Class1(1,2);
    this.two=new Class1(1);
  }
//目的：两个类能独立的修改，而门面的意义在于调用方便

桥梁模式：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 设计模式中的组合模式在JavaScript程序构建中的使用

    设计模式中的组合模式在JavaScript程序构建中的使用

    定义 组合,顾名思义是指用包含多个部件的对象创建单一实体. 这个单一实体将用作所有这些部件的访问点,虽然这大大简化了操作,但也可能具有相当的欺骗性,因为没有哪种隐性方式明确表明该组合包含多少部件. 组合模式的目标是解耦客户程序与复杂元素内部架构,使得客户程序对待所有子元素都一视同仁. 每个子节点都可以使复杂的存在,对于父节点来说,不需要知道子节点的复杂性或者实现子节点的复杂性,只需要关注子节点的特定方法,便可以使用子节点.简化了父和子之间的关系. 对于子节点来说也是一样的,过多的接口暴露有时候也

  • 深入理解JavaScript系列（40）：设计模式之组合模式详解

    介绍 组合模式(Composite)将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 常见的场景有asp.net里的控件机制(即control里可以包含子control,可以递归操作.添加.删除子control),类似的还有DOM的机制,一个DOM节点可以包含子节点,不管是父节点还是子节点都有添加.删除.遍历子节点的通用功能.所以说组合模式的关键是要有一个抽象类,它既可以表示子元素,又可以表示父元素. 正文 举个例子,有家餐厅提

  • JavaScript设计模式开发中组合模式的使用教程

    我们平时开发过程中,一定会遇到这种情况:同时处理简单对象和由简单对象组成的复杂对象,这些简单对象和复杂对象会组合成树形结构,在客户端对其处理的时候要保持一致性.比如电商网站中的产品订单,每一张产品订单可能有多个子订单组合,比如操作系统的文件夹,每个文件夹有多个子文件夹或文件,我们作为用户对其进行复制,删除等操作时,不管是文件夹还是文件,对我们操作者来说是一样的.在这种场景下,就非常适合使用组合模式来实现. 基本知识 组合模式:将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式

  • JavaScript设计模式---单例模式详解【四种基本形式】

    本文实例讲述了JavaScript设计模式---单例模式.分享给大家供大家参考,具体如下: 单例模式也称为单体模式,其中: 1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量. 逻辑单元中的代码通过单一的变量进行访问. 2,三个特点: ① 该类只有一个实例: ② 该类自行创建该实例,即在该类内部创建自身的实例对象: ③ 向整个系统公开这个实例接口 3,单体模式有四种基本形式: 第一种,最简单的单体,只被实例化一次    我简记为json对象 (1)基本结构 va

  • 《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解

    本文实例讲述了Javascript面向对象程序设计组合模式.分享给大家供大家参考,具体如下: 概述 关于组合模式的定义:组合模式(Composite Pattern)有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦.来自百度百科:http://baike.baidu.com/view/3591789.htm 其实从面向对象之五之后,与javascript本身关系不是很大,更

  • JavaScript组合设计模式--改进引入案例分析

    本文实例讲述了JavaScript组合设计模式--改进引入案例.分享给大家供大家参考,具体如下: 对于组合设计模式: (1)组合模式中把对象分为两种(组合对象,和叶子对象)  (2)组合对象和叶子对象实现:同一批操作  (3)对组合对象执行的操作可以向下传递到叶子节点进行操作  (4)这样就会弱化类与类之间的耦合  (5)他常用的手法是把对象组合成属性结构的对象 根据组合模式的这些特性我们改写代码如下: 由于用到了接口检验所以我们先引入接口文件代码 //定义一个静态方法来实现接口与实现类的直接检

  • JavaScript设计模式之观察者模式与发布订阅模式详解

    本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存

  • JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

    本文实例讲述了JavaScript设计模式--简单工厂模式.分享给大家供大家参考,具体如下: 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //(1)定义一个接口类 var Interface=function (name,methods) {//name:接口名字 if(argument

  • javascript设计模式 – 组合模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 组合模式原理与应用.分享给大家供大家参考,具体如下: 介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式. 它是一种对象结构型模式. 场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区

  • JavaScript 设计模式之组合模式解析

    怎么说呢?!就像是动物(组合对象)一样,当它生下后代(叶对象)时,它的后代就有了某种功能(比如:挖洞,听力好等等):也像是一棵树,它有一个根(组合对象)然后是从这个棵树向外冒出的其他枝杆(组合对象)以及从这些枝杆又向外长的叶子(叶对象).换句话说,就是当祖先已经有了,那么只要从这个祖先衍生出来的其他孩子(包括这个祖先下的其他组合对象)已经就具备了某种功能,看上去貌似又有些像是继承."组合模式"在组合对象的层次体系中有两种类型的对象:叶对象和组合对象.组合模式擅长于对大批对象进行操作.

  • javascript 设计模式之组合模式原理与应用详解

    本文实例讲述了javascript 设计模式之组合模式原理与应用.分享给大家供大家参考,具体如下: 组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点: 在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实现: 这个抽象定义一般三个部分组成,组件的基本信息,Add方法,Remove方法: 叶子节点只包含本

随机推荐