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创建和操作表格的函数集合
May 07 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
Jquery解析json数据详解
Dec 26 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
js实现日历
Nov 07 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使用qr生成二维码的示例分享
2014/01/20 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python多进程编程常用方法解析
2020/03/26 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
求职推荐信范文
2013/12/01 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers