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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python中cPickle类使用方法详解
2018/08/27 Python
python对文件的操作方法汇总
2020/02/28 Python
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
北京华建集团SQL面试题
2014/06/03 面试题
行政经理的岗位职责
2013/11/23 职场文书
公司总经理岗位职责
2014/03/15 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
督导岗位职责范本
2015/04/10 职场文书
安全教育主题班会教案
2015/08/12 职场文书
Python源码解析之List
2021/05/21 Python