JavaScript设计模式-15.适配器模式 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>javascript高级语法15-适配器模式</title>
  6     </head>
  7     <body>
  8         <script type="text/javascript">
  9             /*适配器是为了解决已有接口有的类不兼容问题
 10              * 类似于门面模式，但是机理是完全不同的
 11              * 门面模式为了简化接口，使调用者更加方便
 12              * 适配器是为了解决接口不兼容的问题
 13             */
 14             
 15             //接口
 16             var Interface = function(name,methods){
 17                 if(arguments.length != 2){
 18                     alert("interface must have two paramters...");
 19                 }
 20                 this.name = name;//这个是接口的名字
 21                 this.methods = [];//定义个空数组来转载函数名
 22                 for (var i = 0; i < methods.length; i++) {
 23                     if(typeof methods[i] != "string"){
 24                         alert("method name must is String ...")
 25                     }else{
 26                         this.methods.push(methods[i])
 27                     }
 28                 }
 29             }
 30             //定义接口的一个静态方法来实现接口与实现类的直接检验
 31             //静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
 32             //我们要把静态的函数直接写到类层次上
 33             Interface.ensureImplements = function(object){
 34                 if(arguments.length<2){
 35                     alert("必须最少是2个参数");
 36                     return false;
 37                 }
 38                 //遍历
 39                 for (var i = 1; i < arguments.length; i++) {
 40                     var inter = arguments[i];
 41                     //如果你是接口就必须是Interface类型的
 42                     if(inter.constructor != Interface){
 43                         throw new Error("if is interface class must is Interface type");
 44                     }
 45                     //遍历函数集合并分析
 46                     for (var j = 0; j < inter.methods.length; j++) {
 47                         var method = inter.methods[j];
 48                         //实现类中必须有方法名字 和 接口中所有的方法名项目
 49                         if(!object[method] || typeof object[method] != "function"){
 50                             throw new Error("实现类并没有完全实现接口中的所有方法...");
 51                         }
 52                     }
 53                 }
 54             }
 55             function demo(){
 56                 //例如你已经写好一个应用API
 57                 //程序员依托 PcatV1版本来写客户端
 58                 var PcatV1Lib = new Interface("PcatV1Lib",["add"]);
 59                 function plib(){
 60                     this.add = function(x,y){
 61                         return x+y;
 62                     }
 63                     Interface.ensureImplements(this,PcatV1Lib);
 64                 }
 65                 //客户端
 66                 var lib = new plib();
 67                 //调用
 68                 alert(lib.add(1,3));
 69                 
 70                 //现在需要更换类库，但是前台写好的程序，不希望有大的变化
 71                 var PcatV2 = new Interface("PcatV1Lib",['add']);
 72                 function p2lib(){
 73                     this.add = function(list){
 74                         return eval(list.join("+"));
 75                     }
 76                     Interface.ensureImplements(this,PcatV1Lib);
 77                 }
 78                 //客户端
 79                 var lib = new p2lib();
 80                 //调用
 81                 //alert(lib.add(1,3)); 这时候不能这么调用了。
 82                 //利用适配器来解决问题
 83                 //添加适配器
 84                 var wrapper = new Interface("PcatV1Lib",['add']);
 85                 function wrapperpcat2lib(){
 86                     this.add = function(x,y){
 87                         var arr = new Array();
 88                         arr.push(x);
 89                         arr.push(y);
 90                         return new p2lib().add(arr);
 91                     }
 92                 }
 93                 lib = new wrapperpcat2lib()
 94                 alert(lib.add(5,5))
 95                /*利用适配器就可以完成客户端代码不变的情况下改变类库
 96                 *但是这种情况只有客户端代码是标准的时候才可以
 97                 * 否则直接修改客户端也是一个不错的选择。
 98                 */
 99             }
100             demo();
101         </script>
102     </body>
103 </html>

 

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