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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JS中判断null的方法分析
Nov 21 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 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的输出:缓存并压缩动态页面
2013/06/11 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
J2EE相关知识面试题
2013/08/26 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
股东授权委托书
2014/10/15 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
股东出资协议书
2016/03/21 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP