有的时候在开发过程中,我们会发现,客户端需要的接口和提供的接口发生不兼容的问题。由于特殊的原因我们无法修改客户端接口。在这种情况下,我们需要适配现有接口和不兼容的类,这就要提到适配器模式。通过适配器,我们可以在不用修改旧代码的情况下也能使用它们,这就是适配器的能力。

基本理论

适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作。

适配器主要有3个角色组成:
(1)客户端:调用接口的类
(2)适配器:用来连接客户端接口和提供服务的接口的类
(3)适配者:提供服务,但是却与客户端接口需求不兼容服务类。

适配器模式的实现

最简单的适配器

适配器模式没有想象中的那么复杂,举个最简单的例子。
客户端调用一个方法进行加法计算:

1 var result = add(1,2);

但是我们没有提供add这个方法,提供了同样类似功能的sum方法:

1 function sum(v1,v2){
2     return v1 + v2;
3 }

为了避免修改客户端和服务端,我们增加一个包装函数:

1 function add (v1,v2){
2     reutrn sum(v1,v2);
3 }

这就是一个最简单的适配器模式,我们在两个不兼容的接口之间添加一个包装方法,用这个方法来连接二者使其共同工作。

实际应用

随着前端框架的发展,越来越多的开发者开始使用MVVM框架进行开发,只需要操作数据而不需要操作DOM元素,jQuery的作用越来越少。而很多项目中还是引用着jQuery库作用工具类,因为我们要利用jQuery提供的ajax去服务器请求数据。如果jQuery在项目中的作用仅仅是作为ajax工具库的话,有点杀鸡焉用牛刀的感觉,造成资源浪费。这个时候我们完全可以封装一个自己的ajax库。
假设我们封装的ajax就通过一个函数进行使用:

1 ajax({
2     url:'/getData',
3     type:'Post',
4     dataType:'json',
5     data:{
6         id:"123"
7     }
8 })
9 .done(function(){})

除了调用接口ajax与jQuery的$.ajax的不同,其他完全一样。

项目中请求ajax的地方必然很多,我们替换jQuery的时候不可能一个一个去修改$.ajax,那怎么办呢,这个时候,我们就可以增加一个适配器:

1 var $ = {
2     ajax:function (options){
3         return ajax(options);
4     }
5 }

这样就能兼容旧代码和新接口,避免对已有的代码的修改。

总结

适配器模式的原理很简单,就是新增一个包装类,对新的接口进行包装以适应旧代码的调用,避免修改接口和调用代码。

适用场景:存在较多代码调用旧接口,为了避免修改旧代码和更换新接口,不影响现有实现方式的应用场景。

原文地址:http://luopq.com/2015/11/10/desgin-pattern-adapter/

转载于:https://www.cnblogs.com/lrzw32/p/4954895.html

Javascript设计模式理论与实战:适配器模式相关推荐

  1. 八大最常用的JavaScript设计模式

    八大最常用的JavaScript设计模式 设计模式(Design pattern) 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路.通过设计模式可以帮助我们增强代码的可重 ...

  2. 深入 JavaScript 设计模式,从此有了优化代码的理论依据

    点击蓝字 关注「前端小苑」 精品技术文章,热门资讯第一时间送达 一.设计模式综述 我想很多和我一样的朋友小时候都看过<天龙八部>,里面的女主角王语嫣是个武学博才,但自己却毫无实战.比如段誉 ...

  3. 重学 Java 设计模式:实战适配器模式

    重学 Java 设计模式:实战适配器模式 一.前言 擦屁屁纸80%的面积都是保护手的! 工作到3年左右很大一部分程序员都想提升自己的技术栈,开始尝试去阅读一些源码,例如Spring.Mybaits.D ...

  4. JavaScript设计模式(三):结构型设计模式-外观模式、适配器模式、代理模式、装饰者模式、桥接模式、组合模式、享元模式

    JavaScript设计模式 - 结构型设计模式 套餐服务-外观模式 外观模式(Facade) 水管弯弯-适配器模式 适配器模式(Adapter) 适配异类框架 参数适配 牛郎织女-代理模式 代理模式 ...

  5. 2019 某某最新《 Javascript之Node.JS经典教程 Node.js从理论到实战》

    适用人群  前端开发,前端工作,前端学习  课程概述  智能社:Javascript之Node.JS-经典教程:从理论到实战!  基础部分(第1-6节)  模块化(第7-8节)  框架应用(第9-24 ...

  6. JavaScript设计模式与开发实践——JavaScript的多态

    "多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的 ...

  7. 16种JavaScript设计模式(中)

    简介 上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式 单例模式 策略模式 代理模式 迭代器模式 发布订阅模式 命令模式 组合 ...

  8. 《JavaScript设计模式与开发实践》阅读摘要

    <JavaScript设计模式与开发实践>作者:曾探 系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读 面向对象的js 静态类型:编译时便已确定变量的类型 ...

  9. 专访《Javascript设计模式与开发实践》作者曾探:爱编程 爱生活

     专访<Javascript设计模式与开发实践>作者曾探:爱编程 爱生活 发表于12小时前| 2742次阅读| 来源CSDN| 8 条评论| 作者夏梦竹 专访曾探图书作者Javascr ...

最新文章

  1. 进程同步控制 Lock Semaphore Event
  2. 面试集锦(十六)架构设计
  3. mysql -- 学习记录
  4. 不同视图间的跳转方式
  5. SAP UI5 Web Component的React表格控件用法
  6. tensorflow安装正确, import tf, the problem is Couldn't find field google.protob.ExtensionRange.options
  7. 僵尸进程的产生,危害和解决方案
  8. xcode swift_CocoaPods Swift XCode教程
  9. Docker学习总结之docker入门(转自:Vikings翻译)
  10. 二维数组矩阵常用实现方法
  11. 笔记本计算机运行程序,这几招让你的笔记本电脑运行速度变快 必学技巧
  12. Ubuntu系统下python编程入门
  13. selenium: 网页打开最大化
  14. 计算机进制之间的转换(2进制、10进制、8进制、16进制)
  15. 一篇文章让你认识什么是saas模式
  16. python控制台打印文字logo
  17. 我的专业和梦想计算机,2019,我们有很厉害的梦想与计划
  18. flash iphone效果
  19. JAVA 间隔 时间 计算器
  20. 有知道深圳艾奕康(以前叫茂尔盛)、新钶信息系统公司、梦网科技的吗?

热门文章

  1. BZOJ 2301: [HAOI2011]Problem b
  2. 微信公众号的搭建-第五天-自定义菜单
  3. win10 如何配置 java jdk1.8环境变量(2017.8.17 )jdk1.8.0_144
  4. Chapter 1 First Sight——25
  5. 解决修改SQL SERVER 默认1433端口 访问出错的问题;
  6. 除非得到你的首肯,否则别人无法伤害你——Leo网上答疑(20)
  7. WebLogic Platform 8.1 SP3 简体中文版发行
  8. 建议 Solr 用户更新 Apache POI
  9. Linux中sort、uniq、cut、wc命令详解
  10. Asp.net MVC 学习之路-003(增删改查,后端手工,前端生成)