脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript设计模式 – 适配器模式

javascript设计模式 – 适配器模式原理与应用实例分析

 更新时间：2020年04月13日 14:06:33   作者：李小强  
这篇文章主要介绍了javascript设计模式 – 适配器模式,结合实例形式分析了javascript适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了javascript设计模式 – 适配器模式原理与应用。分享给大家供大家参考，具体如下：

介绍：适配器模式的产生也来自具体的问题，拿mac来举例，我不能直接用mac链接VGA，不能直接连接网线接口，这是就需要提供一些转接头，来将一些特殊的接口与我们的火线口相链接。

在这个过程中转接头就相当于一类适配器，mac被转接头所扩展，所以mac称之为适配者。适配器的主要作用是将客户端的请求转化为对适配者接口的调用。好多场景下因为接口的不兼容，

多一个参数少一个参数，参数格式不正确，调用顺序等等问题导致无法直接的相互调用，适配器就是这之间作为调和的方法。

定义：将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作，其别名为包装器（Wrapper）。适配器模式既可以作为类结构型模式，也可以作为对象结构模型。

场景：我们假设一个场景。Common组件中提供了对数组排序以及查询的方法，需要同时传递数组以及查询条件。但现在有一个场景，是我能获取到数组的位置和我使用查找结果的位置不在一处。
所以我们腰痛过适配器对这一类场景进行适配兼容。

示例：

var Common = function(){
  this.QuickSort = function(arr){
    console.log('QuickSort')
  };
  this.searchBykey = function(arr,key){
    console.log('sort');
  }
}
 
var OperationAdapter = function(){
  this.QuickSort = new Common();
  this.arr = [];
  this.setArr = function(arr){
    this.arr = arr;
  };
  this.sort = function(){
    this.QuickSort.QuickSort(this.arr);
  };
  this.search = function(key){
    this.QuickSort.searchBykey(this.arr, key);
  };
}
 
var adapter = new OperationAdapter();
adapter.setArr(['1', '12', '123'])
adapter.sort(); //QuickSort
adapter.search('123'); //sort

适配器模式总结：

优点：

* 将使用与适配类解耦，通过适配器来解决定制化需求，无需对原有结构进行修改
* 一个适配器可以把多个不同的适配者适配到同一目标。
* 适配器的灵活性和扩展性都非常好，添加修改也很方便，符合开闭原则

缺点：

* 适配器与业务耦合严重，导致适配器的修改需要兼顾所有使用场景

适用场景：

* 系统需要使用现有类，而现有类不符合系统需求

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

您可能感兴趣的文章:

相关文章

  • 判断js对象是否拥有某一个属性的js代码

    判断js对象是否拥有某一个属性的js代码

    js对象是否拥有某一个属性的判断方法有很多，下面为大家介绍个比较实用的技巧，希望对大家有所帮助
    2013-08-08
  • javascript之Partial Application学习

    javascript之Partial Application学习

    在数学中，一个函数是描述每个输入值对应唯一输出值的这种对应关系，符号为 f(x)。例如，表达式 f(x)=x2表示了一个函数 f，其中每个输入值x都与唯一输出值x2相联系
    2013-01-01
  • js给图片打马赛克的方法示例

    js给图片打马赛克的方法示例

    有时候你发出去的图片局部不想别别人看见，那么最简单的办法就是在你想要处理的地方打上马赛克，这篇文章主要介绍了js给图片打马赛克的方法示例，感兴趣的可以了解一下
    2021-05-05
  • JavaScript中for-in遍历方式示例介绍

    JavaScript中for-in遍历方式示例介绍

    for-in遍历方式的循环计数器是字符串类型，遍历对象时为对象属性/方法名，遍历数组时为数组元素下标索引，与普通的for循环不同,需要的朋友可以参考下
    2014-02-02
  • Promise.race和Promise.any使用示例详解

    Promise.race和Promise.any使用示例详解

    这篇文章主要为大家介绍了如何使用Promise.race() 和 Promise.any() 示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • jQuery 的 ready()的纯js替代方法

    jQuery 的 ready()的纯js替代方法

    这篇文章主要介绍了jQuery 的 ready()的纯js替代方法的相关资料,需要的朋友可以参考下
    2016-11-11
  • 微信小程序icon组件使用详解

    微信小程序icon组件使用详解

    这篇文章主要为大家详细介绍了微信小程序icon组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 如何写出优雅的JS 代码

    如何写出优雅的JS 代码

    在开发中，变量名，函数名一般要做到清晰明了，尽量做到看名字就能让人知道你的意图，所以变量和函数命名是挺重要，今天来看看如果较优雅的方式给变量和函数命名。
    2021-05-05
  • 微信小程序开发之你可能没有踩过的神坑总结

    微信小程序开发之你可能没有踩过的神坑总结

    最近在做一个小程序的项目,所以记录下开发过程中遇到的坑,这篇文章主要给大家介绍了关于微信小程序开发之你可能没有踩过的神坑,需要的朋友可以参考下
    2021-09-09
  • 一文详解Promise.race()方法功能及应用场景

    一文详解Promise.race()方法功能及应用场景

    这篇文章主要为大家介绍了Promise.race()方法功能及应用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03

最新评论