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 iframe内的函数调用实现方法
Jul 19 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
Validform表单验证总结篇
Oct 31 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
js实现京东轮播图效果
Jun 30 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 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 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
django中的数据库迁移的实现
2020/03/16 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python的数学算法函数及公式用法
2020/11/18 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
葬礼司仪主持词
2014/03/31 职场文书
责任书范本
2014/08/25 职场文书
党员干部学习心得体会
2016/01/23 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers