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计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
DIY实用性框形天线
2021/03/02 无线电
PHP 程序授权验证开发思路
2009/07/09 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
高校教师自荐信范文
2014/03/13 职场文书
秸秆管理实施方案
2014/03/15 职场文书
开工仪式主持词
2014/03/20 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL