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编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
实习单位接收函模板
2014/01/10 职场文书
五一劳动节活动记录
2014/03/23 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
现实表现材料范文
2014/12/23 职场文书
人事主管岗位职责
2015/02/04 职场文书
教师节祝酒词
2015/08/11 职场文书
致运动员的广播稿
2015/08/19 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
golang 实现并发求和
2021/05/08 Golang