1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Javascript高级语法11-桥梁模式</title> 6 </head> 7 <body> 8 <script> 9 /*桥梁模式：把将抽象与实现隔离开来，以便两者单独的变化。 10 * 这种模式对于javascript中常见的事件驱动编程有很大好处。 11 */ 12 13 //自己的类库 14 function addEvent(obj,type,fn){ 15 if(obj.addEventListener){ 16 obj.addEventListener(type,fn,false); 17 }else if(obj.attachEvent){ 18 obj["e"+type+fn]=fn; 19 obj[type+fn] = function(){ 20 obj["e"+type+fn](); 21 } 22 obj.attachEvent("on"+type,obj[type+fn]); 23 }else{ 24 obj["on"+type] = obj["e"+type+fn]; 25 } 26 } 27 28 29 30 function demo1(){ 31 //一个页面选择宠物的例子 32 button.addEvent(element,"click",getPetByName); 33 function getPetByName(e){ 34 var id = this.id; 35 asyncRequest("GET","pet.action?id="+id,function(pet){ 36 console.log("request pet" + pet.responseText) 37 }) 38 } 39 /*上面的做法是你在页面有一个按钮，单击会出发后面请求 40 * 如果要进行单元测试：1.用户登录 2.找到你的这个页面 3.单击按钮 41 * 如果需要进行效能层次上的单元测试，是很难进行并发测试的。 42 */ 43 //第二种做法 用简单的桥梁模式来解决 44 function getPetByName(id,callback){ 45 var id = this.id; 46 asyncRequest("GET","pet.action?id="+id,function(pet){ 47 callback(pet); 48 }) 49 } 50 //定义一个桥梁将抽象和实现相互联系在一起 51 addEvent(element,"click",getPetByNameBridge); 52 function getPetByNameBridge(){ 53 getPetByName(this.id,function(pet){ 54 console.log("request pet" + pet.responseText); 55 }) 56 } 57 /*这种做法使API和展现层完全分离 58 * API和展现层可以灵活变动。 59 * 这个模式在Extjs项目开发时候非常的常用。 60 * 61 * 桥梁模式的其他用途： 62 * 特权函数：当你的接口过于复杂的时候，把原本复杂的接口用桥梁的模式抽取出一大部分函数整合起来 63 * 使之客户端更容易的调用。 64 */ 65 66 } 67 // demo1();//demo1是伪代码 demo2是实例 68 69 function demo2(){ 70 // 特权函数 71 var p= function(){ 72 var add=function(){ 73 //进行复杂的数学操作 74 } 75 //这是一个信息全封闭的类，它的内部进行复杂的业务操作 76 //建立一个特权函数，让它调用起来更方便 77 this.bridge = function(){ 78 return { 79 bridgeAdd:function(){ 80 //执行前 81 add(3,3) 82 //执行后 83 } 84 } 85 } 86 } 87 88 //桥梁还可以把多个类进行桥接(链接) 89 var class1 = function(a,b){ 90 this.a = a; 91 this.b = b; 92 } 93 var class2 = function(c,d){ 94 this.c = c; 95 this.d = d; 96 } 97 var bridgeClass = function(){ 98 this.one = new class1(1,2); 99 this.two = new class2(3,4); 100 } 101 /*问，这个理念不是门面模式吗？ 102 * 不是，他的目的是在于class1和class2能独立的修改，使之完全松耦合。 103 * 而门面模式的意义在于调用的方便。 104 */ 105 106 } 107 108 </script> 109 </body> 110 </html>