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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
angularjs基础教程
2014/12/25 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
python语言使用技巧分享
2016/05/31 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
校长就职演讲稿
2014/01/06 职场文书
工作表现评语
2014/01/19 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书