JavaScript适配器模式详解


Posted in Javascript onOctober 19, 2017

适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(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适配器模式详解

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
javascript自执行函数
Feb 10 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
Vue实现日历小插件
Jun 26 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
JavaScript门面模式详解
Oct 19 #Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 #Javascript
AngularJS的$location使用方法详解
Oct 19 #Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 #Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 #Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python实现图片压缩代码实例
2019/08/12 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
一些Solaris面试题
2013/03/22 面试题
中专自我鉴定
2014/02/05 职场文书
青春励志演讲稿
2014/04/29 职场文书
出售房屋委托书范本
2014/09/24 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书