Skip to main content
 首页 » 编程设计

javascript外观模式

2022年07月16日35qq号
  1 <!DOCTYPE HTML> 
  2 <html lang="en-US"> 
  3 <head> 
  4     <meta charset="utf-8"> 
  5     <title></title> 
  6 </head> 
  7 <body> 
  8  
  9 <script> 
 10     /** 
 11      * 门面模式 
 12      * 
 13      * 定义: 
 14      * 为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。 
 15      * 
 16      * 本质: 
 17      * 封装交互,简化调用 
 18      * 
 19      * 门面模式有两个作用:一是简化类的接口;二是消除类与使用它的客户代码之间的耦合。在js中,门面模式常常是开发人员最亲密的朋友。它是几乎所有js库的核心原则。通过创建一些便利方法让复杂系统变得更加简单易用,门面模式可以使库提供的工具更容易理解。使用这种模式,程序员可以间接地与一个子系统打交道,与直接访问子系统相比,这样做更不容易出错。 
 20      * 门面模式简化了诸如错误记录或跟踪页面视图统计数据这类常用的或重复性的任务。通过添加一些便利方法(这种方法是对原有的一些方法的组合利用),它还可以让对象的功能显得更加完善。 
 21      * 门面模式可用于简化复杂接口。它可以在幕后为你进行错误检查,清除不再需要的大对象,以及用一种更加易用的方式展现对象的功能。 
 22      * 门面模式并非必不可少,同样的任务不用它也能完成。这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用。它可以让程序员过的更轻松,使代码变得更容易管理。 
 23      * 这个模式在DOM脚本编程这种需要面对各种不一致的浏览器接口的环境中很常用。 
 24      * 
 25      * 外观模式的目的: 
 26      * 外观模式的目的不是给子系统添加新的功能接口,而是为了让外部减少与子系统内多个模块的交互,松散耦合,从而让外部能够更简单地使用子系统。 
 27      * 这点要特别注意,因为外观是当作子系统对外的接口出现的,虽然也可以在这里定义依稀子系统没有的功能,但不建议这么做,外观应该是包装已有的功能,它主要负责组合已有功能来实现客户需要,而不是添加新的实现。 
 28      * 
 29      * 表面上看就是把客户端的代码搬到Facade里面了。 
 30      * 
 31      * 对设计原则的体现 
 32      * 很好的体现了“最少知识原则” 
 33      * 
 34      */ 
 35      
 36     /* 
 37     界面: 
 38     主要指的是从一个组件外部来看这个组件,,能够看到什么,就、这就是这个组件的界面,也就是所说的外观, 
 39     比如,你从一个类外部来看这个类,那么这个类的public方法就是这个类的外观。 
 40     再比如,你从一个模块外观来看这个模块,那么这个模块对外的接口就是这个模块的外观,因为你只能看到这些接口,其他的模块内部实现的部分是被接口封装隔离的。 
 41  
 42     接口: 
 43     主要指的是外部和内部交互的一个通道,通常是指一些方法,可以是类的方法,也可以是interface方法。 
 44      */ 
 45  
 46     /* 
 47      基于GUI的操作系统就是计算机上的数据和功能的一个门面。每次点击,拖动和移动某个东西时,实际上是在跟一个门面打交道,间接地执行了一些幕后命令。 
 48      */ 
 49  
 50     // 跨浏览器事件侦听器 
 51     function addEvent(el, type, fn) { 
 52         if (window.addEventListener) { 
 53             el.addEventListener(type, fn, false); 
 54         } else if (window.attachEvent) { 
 55             el.attachEvent('on' + type, fn); 
 56         } else { 
 57             el['on' + type] = fn; 
 58         } 
 59     } 
 60     /* 
 61      addEvent函数是一个基本的门面,有了它,就有了一种为DOM节点添加事件侦听器的简便方法。 
 62      */ 
 63  
 64     // 用作便利方法的门面元素 
 65     /* 门面模式给予开发人员的另一个好处表现在对函数的组合上。这些组合而得的函数又叫便利函数(convenience function). 
 66      */ 
 67     function a(x) { 
 68         // do stuff here... 
 69     } 
 70     function b(y) { 
 71         // do stuff here... 
 72     } 
 73     function ab(x,y) { 
 74         a(x); 
 75         b(y); 
 76     } 
 77  
 78     // DOM中的例子 
 79     var DED=window.DED || {}; 
 80     DED.util={ 
 81         stopPropagation:function(e){ 
 82             if(e.stopPropagation) { 
 83                 // w3 interface 
 84                 e.stopPropagation(); 
 85             } else { 
 86                 // IE's interface 
 87                 e.cancelBubble=true; 
 88             } 
 89         }, 
 90         preventDefault:function(e){ 
 91             if(e.preventDefault) { 
 92                 e.preventDefault(); 
 93             } else { 
 94                 e.returnValue=false; 
 95             } 
 96         }, 
 97         // our convenience method 
 98         stopEvent:function(e){ 
 99             DED.util.stopPropagation(e); 
100             DED.util.preventDefault(e); 
101         } 
102     }; 
103  
104  
105     // 示例: 设置HTML元素的样式 
106     function setStyle(elements,prop,val) { 
107         for(var i= 0,len=elements.length;i<len;i++) { 
108             document.getELementById(elements[i]).style[prop]=val; 
109         } 
110     } 
111     setStyle(['foo'], 'position', 'absolute'); 
112  
113     function setCSS(el,styles){ 
114         for(var prop in styls) { 
115             if(!styls.hasOwnProperty(prop)) { 
116                 continue; 
117             } 
118             setStyle(el,prop,styls[prop]); 
119         } 
120     } 
121     setCSS(['foo', 'bar'], { 
122         position:'absolute', 
123         top:'50px', 
124         left:'300px' 
125     }); 
126  
127  
128     // 示例: 设计一个事件工具 
129     DED.util.Event={ 
130         getEvent:function(e){ 
131             return e || window.event; 
132         }, 
133         getTarget:function(e){ 
134             e = this.getEvent(e); 
135             return e.target || e.srcElement; 
136         }, 
137         stopPropagation:function(e){ 
138             e = this.getEvent(e); 
139             if(e.stopPropagation) { 
140                 e.stopPropagation(); 
141             } else { 
142                 e.cancelBubble=true; 
143             } 
144         }, 
145         preventDefault:function(e){ 
146             e = this.getEvent(e); 
147             if(e.preventDefault) { 
148                 e.preventDefault(); 
149             } else { 
150                 e.returnValue=false; 
151             } 
152         }, 
153         stopEvent:function(e){ 
154             this.stopPropagation(e); 
155             this.preventDefault(e); 
156         } 
157     }; 
158  
159     addEvent($('example'), 'click', function(e){ 
160         console.log(DED.util.Event.getTarget(e)); 
161         DED.util.Event.stopEvent(e); 
162     }); 
163  
164     /* 
165      实现门面模式的一般步骤 
166      找准自己的应用程序中感觉适合使用门面方法的地方后,就可以着手加入便利方法了。这些函数的名称应该仔细考虑,与它们的用途要相称。对于有几种函数组合而成的函数,一个简单的办法就是把相关函数的名称串连成一个函数名,并采用camel大写规范。 
167      处理浏览器API的不一致性属于另一种情况,此时要做的就是把分支代码放在新创建的门面函数中,辅以对象检查或浏览器嗅探等技术。命名方式应该以易识别为主。 
168  
169      门面模式的适用场合 
170      判断是否应该应用门面模式的关键在于辨认那些反复成组出现的代码。如果函数b出现在函数a之后这种情况经常出现,那么也许你应该考虑添加一个把这两个函数组合起来的门面函数。 
171      在自己的核心工具代码中加入门面函数的另一个可能目的是应对js内置函数在不同浏览器中的不同表现。 
172      */ 
173  
174     /* 
175      门面模式之利 
176      使用门面模式的目的就是要让程序员过的更轻松一些。编写一次组合代码,然后就可以反复使用它,这有助于节省时间和精力,他们提供了一个处理常见问题和任务的简化接口。 
177      门面方法方便了开发人员,并且提供了较高层的功能,他们还能降低对外部代码的依赖程度。为应用系统的开发增加了一些额外的灵活性。通过使用门面模式,可以避免与下层子系统紧密耦合。这样就可以对这个系统进行修改该而不会影响到客户代码。 
178  
179      门面模式之弊 
180      有时候门面元素也会带来一些不必要的额外负担。门面模式时常常会被滥用,导致小题大做。在实施一些套路之前应该认真掂量一下其实用性,因为它们不易察觉的破坏性和昂贵代价可能会是应用程序步履蹒跚。 
181      对于简单的个人网站或少量营销网页来说,仅为工具提示和弹出式窗口这样一点增强行为就导入整个js库可能并不明智。 
182      */ 
183      
184     /*** 
185     外观模式的实现----------------------------------- 
186     */ 
187  
188     /* 
189     1.Facade的实现 
190     对于一个子系统而言,外观类不需要很多,通常可以实现成为一个单例。也可以直接把外观中的方法实现称为静态的方法,这样就可以不需要创建外观对象的实例而直接调用,这种实现相当于把外观类当成一个辅助工具类实现。 
191      */ 
192      
193      var Facade = function(){}; 
194      Facade.prototype = { 
195         test: function(){ 
196             var a = new AModuleImpl(); 
197             a.testA(); 
198             var b = new BModuleImpl(); 
199             b.testB(); 
200             var c = new CModuleImpl(); 
201             c.testC(); 
202         } 
203      }; 
204  
205      /* 
206      2.Facade可以实现成为Interface 
207      虽然Facade通常直接实现成为类,但是也可以把Facade实现成为真正的interface,只是这样会增加系统的复杂度,因为这样会需要一个Facaded的实现,还需要一个来获取Facade接口对象的工厂。 
208  
209      3.Facade实现成为interface的附带好处 
210      如果把Facade实现成为接口,就能够有选择性地暴露接口的方法,尽量减少模块对子系统外提供的接口方法。 
211  
212      换句话说,一个模块的接口中定义的方法可以分成两部分,一部分是给子系统外部使用的,一部分是子系统内部的模块间相互调用时使用的。有了Facade接口,那么用于仔细用内部的接口功能就不用暴露给子系统的外部了。 
213       */ 
214       
215      var AModuleApi = function(){}; 
216      AModuleApi.prototype = { 
217         // 对子系统外部 
218         a1: function(){}, 
219         // 其他方法是用在子系统内部,与B,C模块交互用 
220         a2: function(){}, 
221         a3: function(){} 
222      }; 
223  
224      var FacadeApi = { 
225         // 这些是A,B,C模块对仔细用外的接口,这样外部就不需要知道A,B,C模块的存在, 
226         // 只需要知道Facade接口就行了。 
227         a1: function(){}, 
228         b1: function(){}, 
229         c1: function(){}, 
230  
231         // 这是对外提供的组合方法 
232         test: function(){} 
233      }; 
234  
235      /* 
236      4.Facade的方法实现 
237      Facade的方法实现中,一般是负责把客户端的请求转发给子系统内部的各个模块进行处理,Facade本身并不进行功能的处理。Facade的方法实现只是实现一个功能的组合调用。 
238       */ 
239       
240      /* 
241      相关模式 
242  
243      外观模式和中介者模式 
244  
245      这两个模式非常类似,但是却有本质的区别。 
246      中介者模式主要用来封装多个对象之间相互的交互,多用在系统内部的多个模块之间;而外观模式封装的是单向的交互,是从客户端访问系统的调用,没有从系统中来访问客户端的调用。 
247      在中介者模式的实现里面,是需要实现具体的交互功能的;而外观模式的实现里面,一般是组合调用或是转调内部实现的功能,通常外观模式本身并不实现这些功能。 
248      中介者模式的目的主要是松散多个模块之间的耦合,把这些耦合关系全部放到中介者中去实现;而外观模式的默读是简化客户端的调用,这点和中介者模式也不同。 
249  
250      外观模式和单例模式 
251  
252      通常一个子系统只需要一个外观实例,所以外观模式可以和单例模式组合使用,吧Facade类实现成为单例。当然,要把外观类的构造器私有化,然后把提供给客户端的方法实现成为静态的。 
253  
254      外观模式和抽象工厂模式 
255      外观模式的外观类通常需要和系统内部的多个模块交互,每个模块一般都有自己的接口,所以在外观类的具体实现里面,需要获取这些接口,然后组合这些接口来完成客户端的功能。 
256      那么怎么获取这些接口呢?就可以和抽象工厂一起使用,外观类通过抽象工厂来获取所需要的接口,而抽象工厂也可以把模块内部的实例对Facade进行屏蔽,也就是说Facade也仅仅只是知道它从模块中获取它需要的功能,模块内部的细节,Facade也不知道。 
257       */ 
258       
259  
260       // http://www.dofactory.com/javascript-facade-pattern.aspx 
261  
262     var Mortgage = function(name) { 
263         this.name = name; 
264     } 
265  
266     Mortgage.prototype = { 
267         applyFor: function(amount) { 
268  
269             // access multiple subsystems... 
270  
271             var result = "approved"; 
272             if (!new Bank().verify(this.name, amount)) { 
273                 result = "denied"; 
274             } else if (!new Credit().get(this.name)) { 
275                 result = "denied"; 
276             } else if (!new Background().check(this.name)) { 
277                 result = "denied"; 
278             } 
279  
280             return this.name + " has been " + result + 
281                    " for a " + amount + " mortgage"; 
282         } 
283     } 
284  
285     var Bank = function() { 
286         this.verify = function(name, amount) { 
287             // complex logic ... 
288             return true; 
289         } 
290     } 
291     var Credit = function() { 
292         this.get = function(name) { 
293             // complex logic ... 
294             return true; 
295         } 
296     } 
297     var Background = function() { 
298         this.check = function(name) { 
299             // complex logic ... 
300             return true; 
301         } 
302     } 
303  
304  
305     function run() { 
306  
307         var mortgage = new Mortgage("Joan Templeton"); 
308         var result = mortgage.applyFor("$100,000"); 
309  
310         alert(result); 
311     } 
312  
313 </script> 
314 </body> 
315 </html>

本文参考链接:https://www.cnblogs.com/webFrontDev/archive/2013/03/24/2978511.html