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>
