详细解读在JavaScript中实现设计模式中的适配器模式的方法（图文教程）

适配器模式可以根据需求转换(或调整)一个接口,创建含有您所需接口的另一个对象,并将它连接到您想改变接口的对象,从而完成这种转换,下面就来详解JavaScript实现设计模式中的适配器模式的方法

有的时候在开发过程中，我们会发现，客户端需要的接口和提供的接口发生不兼容的问题。由于特殊的原因我们无法修改客户端接口。在这种情况下，我们需要适配现有接口和不兼容的类，这就要提到适配器模式。通过适配器，我们可以在不用修改旧代码的情况下也能使用它们，这就是适配器的能力。
适配模式可用来在现有接口和不兼容的类之间进行适配，使用这种模式的对象又叫包装器（wrapper），因为它们是在用一个新的接口包装另一个对象。
从表面上看，适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口，它并不提供额外的选择，而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口，它并不会滤除某些能力，也不会简化接口。如果客户系统API不可用，就需要用到适配器。

基本理论

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

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

适配器模式的实现

1.最简单的适配器

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

var result = add(1,2);

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

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

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

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

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

2.实际应用

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

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

除了调用接口ajax与jQuery的$.ajax的不同，其他完全一样。
项目中请求ajax的地方必然很多，我们替换jQuery的时候不可能一个一个去修改$.ajax，那怎么办呢，这个时候，我们就可以增加一个适配器：

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

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

总结

适配器模式的原理很简单，就是新增一个包装类，对新的接口进行包装以适应旧代码的调用，避免修改接口和调用代码。
适用场景：存在较多代码调用旧接口，为了避免修改旧代码和更换新接口，不影响现有实现方式的应用场景。

1.适配器模式的适用场合：适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。适配器所适配的两个方法执行的应该是类似的任务，否则的话就解决不了问题。就像桥接元素和外观元素一样，通过创建适配器，可以把抽象与其实现隔离开来，以便二者独立变化。

2.适配器模式之利：用一个新的接口对现有类的接口进行包装，这样客户程序就能使用这个并非为其量身打造的类而又无需为此大动手术。

3.设配器模式之弊：有人认为适配器是一种不必要的开销，完全可以通过重写现有代码避免。此外适配器模式也会引入一批需要支持的新工具。如果现有API还未定形，或者新接口还未定形，那么适配器可能不会一直管用。
在涉及大型系统和遗留框架的情况下，它的优点往往比缺点更突出。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

实现JavaScript的组成（BOM和DOM详细解读）

Adapter适配器模式在JavaScript设计模式编程中的运用总结（图文教程）

JavaScript 数组中some()和filter()的用法及区别（附有代码）

以上就是详细解读在JavaScript中实现设计模式中的适配器模式的方法（图文教程）的详细内容，更多请关注其它相关文章！