转载

Javascript设计模式理论与实战:适配器模式

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

基本理论

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

适配器主要有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/

正文到此结束
Loading...