JS 设计模式: 适配器模式

适配器模式：

      是将一个类（对象）的接口（方法和属性）转化成客户希望的一个接口（方法和属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。速成包装器。

适配器可以被添加到现有代码中以协调两个不同的接口，如果现有代码的接口很好地满足需要，那就没必要使用适配器，如果是现有的接口对于手头的工作来说不够直观或实用，那么可以使用适配器来提供一个更简单的或更丰富的接口。

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

如果你有一个具有3个字符串参数的函数，但客户系统拥有的却是一个包含三个字符串的元素的数组，此时就可以用一个适配器来衔接二者。

 

 1 var clientObject = [
 2 {string1: 'foo'},
 3 {string2: 'baq'},
 4 {string3: 'bar'},
 5 {string4: 'baz'}
]
 6 
 7 function insterfaceMethod(str1, str2, str3, str4) {
 8    console.log(str1) // foo
 9    console.log(str2) // baq
10    console.log(str3) // bar
11    console.log(str4) // baz
12 }
13 // 为了把clienObject 作为参数传递给insterfaceMethod，需要用到适配器
14 
15 function clientToInterfaceAdapter(o){
16   insterfaceMethod(o[0].string1, o[1].string2, o[3].string4)
17 }
18 clientToInterfaceAdapter(clientObject )

 实际应用：

随着前端框架的发展，越来越多的开发者开始使用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，那怎么办呢，这个时候，我们就可以增加一个适配器：

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

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

总结：

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

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

posted @ 2018-02-11 20:07  LZZHF  阅读(119)  评论(0)  编辑  收藏  举报