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 option删除代码集合
Nov 12 Javascript
JSON 数据格式介绍
Jan 13 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
webpack的移动端适配方案小结
Jul 25 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动态图像的创建
2006/10/09 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
jquery中radio checked问题
2015/03/16 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
学习python (1)
2006/10/31 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python 性能优化技巧总结
2016/11/01 Python
利用aardio给python编写图形界面
2017/08/21 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python实现证件照换底功能
2019/08/20 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
土木工程专业个人求职信
2013/12/30 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
运动会加油口号
2014/06/07 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
初婚初育证明范本
2015/06/18 职场文书