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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
react中props 的使用及进行限制的方法
Apr 28 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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python os.fork() 循环输出方法
2019/08/08 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
文明班级建设方案
2014/05/15 职场文书
经济管理自荐书
2014/06/09 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
nginx之queue的具体使用
2022/06/28 Servers