JavaScript适配器模式原理与用法实例详解


Posted in Javascript onMarch 09, 2020

本文实例讲述了JavaScript适配器模式原理与用法。分享给大家供大家参考,具体如下:

适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象。

基本理论

适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作。

适配器主要有3个角色组成:

(1)客户端:调用接口的类
(2)适配器:用来连接客户端接口和提供服务的接口的类
(3)适配者:提供服务,但是却与客户端接口需求不兼容服务类。

此处 有一个实例是关于两个数的加法的。

一,先有一个能够实现,两个数加法的服务和客户端。

(1)先引入接口检验类----检查实现该接口的类是否实现了接口中所用方法。

//(定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name:接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话,就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

(2)使用接口类同一接口

var InterfaceResult=new Interface("InterfaceResult",["add"]);

(3)服务端两个数的加法

function First() {
    this.add=function (x,y) {
     return x+y;
    }
    Interface.ensureImplement(this,InterfaceResult);//接口检验
  }

(4)客户端调用服务端代码

var first=new First();
alert(first.add(1,2)) ;//3

二,现在有一个要求就是,需要换一个类库,但是客户端的程序不希望有大的改动。

(1)依然继承相同接口的基础上,类库为

function Second() {
    this.add=function (numberList) {
      //[1,2,3] "1+2+3" eval("1+2+3")
      return eval(numberList.join("+"));
    }
    Interface.ensureImplement(this,InterfaceResult);//检验当前类是否完全实现接口中的方法
  }

此时我们如果需要使用该类库的话,客户端又不能该,那么用和之前的调用方式:

var second=new Second();
alert(second.add(1,3));//已经不能这样使用了

是完全不符合客户端的要求的。为了在保证客户端不变的情况下,又能使用新的类库,我们需要使用适配器模式。现在接口发生了变化,使用适配器兼容,以便适应客户端的不变

使客户端与新的接口相会兼容。

(2)适配器

function ThirdWarpper() {
       this.add=function (x,y) {
         var arr=new Array();
         arr.push(x);
         arr.push(y);
         return new Second().add(arr);
       }
       Interface.ensureImplement(this,InterfaceResult);
     }

(3)客户端代码

//客户端
  var third=new ThirdWarpper();
   var result= third.add(1,8);//传递数
   alert(result);

针对上述的使用新的类库后的图解为:

 JavaScript适配器模式原理与用法实例详解

总结,

从表面上看,适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口,它并不提供额外的选择,
而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python双向链表实现实例代码
2013/11/21 Python
Python编码爬坑指南(必看)
2016/06/10 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
暑期社会实践方案
2014/02/05 职场文书
情人节活动策划方案
2014/02/27 职场文书
项目合作协议书范本
2014/04/16 职场文书
幼儿评语大全
2014/04/30 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
陕西导游词
2015/02/04 职场文书
李白故里导游词
2015/02/12 职场文书
nginx优化的六点方法
2021/03/31 Servers
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS