美文网首页
JS设计模式---10.适配器模式

JS设计模式---10.适配器模式

作者: 念丶凉 | 来源:发表于2019-01-04 15:19 被阅读7次

适配器模式的作用

适配器模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器。(个人理解其实就是用来做兼容的一种模式)

特点

适配器可以被添加到现有代码中以协调两个不同的接口。
从表面上看,适配器模式和门面模式很像,它们都是要对别的对象进行包装并改变其呈现的接口。但是它们的不同之处就在于如何改变接口。门面元素只是一个简化的接口,并没有额外的选择,而适配器则要把一个接口转换到另一个接口,他不会滤除某些能力,也不会简化接口。

方法兼容

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

// 假设你有一个对象 还有一个以三个字符串味参数的函数
var obj = {
      string1:"foo",
      string2:"bar",
      string3:"baz"
}
function  interfaceMethod(str1,str2,str3){
  // ...
}
// 为了把obj作为参数传递给interfaceMethod 需要用到适配器
function clientToInterfaceAdapter(o){
   interfaceMethod(o.string1,o.string2,o.string3)
}
// 现在就可以把整个对象传递给这个函数
clientToInterfaceAdapter(obj)

吐槽一下,个人觉得,这种简单的完全没啥子必要。。。直接interfaceMethod(obj.string1,obj.string2,obj.string3)又快又好。。可能书上是为了通熟易懂吧。

适配原有实现

在某些情况下,从客户一方对代码进行修改是不可能的。因此我们会避免创建API。如果现有接口发生了改变,那么客户代码也必须进行相应的修改才能使用这个接口,否则整个应用系统就会有失灵的危险。在引入新接口之后,一般来说最好向客户方提供一些可为其实现新接口的适配器。

适配两个库

适配Prototype库的$函数到YUI的get方法的转换。

//Prototype $ function
function $(){
  var elements = new Array();
  for(vari=0;i<arguments.length;i++){
    var element = arguments[i];
     if(typeof element  == 'string')
       element = document.getElementById(element);
      if(arguments.length == 1)
        return element;
       elements.push(element); 
  }
  return elements
}
// YUI get method
YAHOO.util.Dom.get = function(el){
  if(YAHOO.lang.isString(el)){
    return document.getElementById(el);
  }
  if(YAHOO.lang.isArray(el)){
    var c = [];
    for(var i=0;i<el.length;i++){
       c[c.length] = YAHOO.util.get(el[i])
    }
    return c;
  }
  if(el) return el;
  return null 
}

二者的区别在于:get具有一个参数,这个参数可以是一个HTML元素 字符串或者由字符串或HTML元素组成的数组,而$函数并没有正式列出参数,而是由客户任意传入任意数目的参数,不管是字符串还是HTML元素都行
如果需要从使用Prototype的$函数改为使用YUI的get方法(或者相反),那么这个适配器需要这样写

function PrototypeToYUIAdapter(){
   return YAHOO.util.Dom.get(arguments)
}
function YUIToPrototypeAdapter(el){
   return $.apply(window,el intanceof Array ? el : [el])
}
// 对于从Prototype投奔YUI的人来说,只需要添加下面这行代码
$ = PrototypeToYUIAdapter
//同理 对于YUI改投Prototype的人来说
YAHOO.util.Dom.get  = YUIToPrototypeAdapter

相关文章

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • JS设计模式---10.适配器模式

    适配器模式的作用 适配器模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器。(个人理解其实...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 简说设计模式之适配器模式

    前言:对于设计模式基础概念可以去看[简说设计模式之设计模式概述] 一、什么是适配器模式 适配器模式(Adapter...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 最常用的设计模式---适配器模式(C++实现)

    适配器模式属于结构型的设计模式,它是结构型设计模式之首(用的最多的结构型设计模式)。 适配器设计模式也并不复杂,适...

  • js设计模式-适配器模式、装饰器模式(2)

    github所有关于设计模式的代码:js学习设计模式记录 1.适配器模式 使用场景:旧接口与使用者不兼容,中间添加...

  • iOS设计模式(5)策略模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

  • iOS设计模式(6)模板模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

  • iOS设计模式(7)建造者模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

网友评论

      本文标题:JS设计模式---10.适配器模式

      本文链接:https://www.haomeiwen.com/subject/haislqtx.html