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

  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>

 

posted @ 2017-07-16 21:03  橙云生  阅读(199)  评论(0)    收藏  举报