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


Posted in Javascript onApril 13, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
JS交换变量的方法
Jan 21 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
javascript实现画板功能
Apr 12 #Javascript
JS实现随机点名器
Apr 12 #Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 #Javascript
You might like
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
javascript函数库-集合框架
2007/04/27 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python中的文件操作
2016/08/28 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python try except else使用详解
2021/01/12 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
业务主管岗位职责
2013/11/20 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
工会工作先进事迹
2014/08/18 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
入党介绍人考察意见
2015/06/01 职场文书