精华内容
下载资源
问答
  • javascript 适配器模式

    2018-10-09 11:42:01
    javascript 适配器模式 适配器模式:将一个类的接口转换成客户希望的另一个接口。适配器模式让那些接口不兼容的类可以一起工作 例如, 我以前做了个api库,其中有个add函数,之前传递两个参数,先在呢,我想传递三个参数...

    javascript 适配器模式


    适配器模式:将一个类的接口转换成客户希望的另一个接口。适配器模式让那些接口不兼容的类可以一起工作

    例如, 我以前做了个api库,其中有个add函数,之前传递两个参数,先在呢,我想传递三个参数,但我依然想兼容以前的api

    接口请参考前面文章

      /*
      * 适配器模式
      * */
      //以前的api 库
        var fun = new Interface('fun',['add']);
        var funLib = function(){
            this.add=function (x,y) {
                console.log(x+y);
            };
            Interface.ensureImplements(this,fun);
        };
        //新的api库
        var newLib =function(){
            this.add=function (x,y,z) {
                console.log(x+y+z);
            }
            Interface.ensureImplements(this,fun);
        }
        //适配器类
        var wraper = function(){
            this.add=function (x,y,z) {
                if(arguments.length>2){
                    newLib.add(x,y,z);
                }else if(arguments.length==2){
                    funLib.add(x,y);
                }
            }
            Interface.ensureImplements(this,fun);
        }
        wraper.add(20,30)
    
    展开全文
  • JavaScript适配器模式

    2017-10-19 14:57:00
    JavaScript适配器模式 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象。 基本理论 适配器模式:将一个...
    适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象。
    基本理论
    适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作。
    适配器主要有3个角色组成:
    (1)客户端:调用接口的类
    (2)适配器:用来连接客户端接口和提供服务的接口的类
    (3)适配者:提供服务,但是却与客户端接口需求不兼容服务类。
    此处 有一个实例是关于两个数的加法的。
    一,先有一个能够实现,两个数加法的服务和客户端。
    (1)先引入接口检验类----检查实现该接口的类是否实现了接口中所用方法。
    //(定义一个静态方法来实现接口与实现类的直接检验
    //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
    //我们要把静态的函数直接写到类层次上
    //定义一个接口类
    var Interface=function (name,methods) {//name:接口名字
        if(arguments.length<2){
            alert("必须是两个参数")
        }
        this.name=name;
        this.methods=[];//定义一个空数组装载函数名
        for(var i=0;i<methods.length;i++){
            if(typeof  methods[i]!="string"){
                alert("函数名必须是字符串类型");
            }else {
                this.methods.push( methods[i]);
            }
        }
    };
    Interface.ensureImplement=function (object) {
        if(arguments.length<2){
            throw  new Error("参数必须不少于2个")
            return false;
        }
        for(var i=1;i<arguments.length;i++){
            var inter=arguments[i];
            //如果是接口就必须是Interface类型
            if(inter.constructor!=Interface){
                throw  new Error("如果是接口类的话,就必须是Interface类型");
            }
            //判断接口中的方法是否全部实现
            //遍历函数集合
            for(var j=0;j<inter.methods.length;j++){
                var method=inter.methods[j];//接口中所有函数
    
                //object[method]传入的函数
                //最终是判断传入的函数是否与接口中所用函数匹配
                if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
                    throw  new Error("实现类中没有完全实现接口中的所有方法")
                }
            }
        }
    }
    (2)使用接口类同一接口
     var InterfaceResult=new Interface("InterfaceResult",["add"]);

      (3)服务端两个数的加法

    
    
    function First() {
            this.add=function (x,y) {
              return x+y;
            }
            Interface.ensureImplement(this,InterfaceResult);//接口检验
        }
    
    

     (4)客户端调用服务端代码

     var first=new First();
       alert(first.add(1,2)) ;//3

    二,现在有一个要求就是,需要换一个类库,但是客户端的程序不希望有大的改动。

    (1)依然继承相同接口的基础上,类库为

    function Second() {
            this.add=function (numberList) {
                //[1,2,3]  "1+2+3"  eval("1+2+3")
               return eval(numberList.join("+"));
            }
            Interface.ensureImplement(this,InterfaceResult);//检验当前类是否完全实现接口中的方法
        }

    此时我们如果需要使用该类库的话,客户端又不能该,那么用和之前的调用方式:

    var second=new Second();
    alert(second.add(1,3));//已经不能这样使用了

    是完全不符合客户端的要求的。为了在保证客户端不变的情况下,又能使用新的类库,我们需要使用适配器模式。现在接口发生了变化,使用适配器兼容,以便适应客户端的不变

    使客户端与新的接口相会兼容。
    (2)适配器
      function ThirdWarpper() {
                 this.add=function (x,y) {
                     var arr=new Array();
                     arr.push(x);
                     arr.push(y);
                     return new  Second().add(arr);
                 }
                 Interface.ensureImplement(this,InterfaceResult);
             }

    (3)客户端代码

        //客户端
        var third=new ThirdWarpper();
         var result= third.add(1,8);//传递数
         alert(result);
    针对上述的使用新的类库后的图解为:

     

     
    总结,
    从表面上看,适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口,它并不提供额外的选择,
    而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。
    
    
     

     

     
     
     
    posted on 2017-10-19 14:57 WFaceBoss 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/wfaceboss/p/7692437.html

    展开全文
  • 主要为大家详细介绍了JavaScript适配器模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了JavaScript适配器模式原理与用法,结合具体实例形式详细分析了JavaScript适配器模式概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
  • 主要介绍了javascript设计模式 – 适配器模式,结合实例形式分析了javascript适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之适配器模式介绍,适配器模式,一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况,需要的朋友可以参考下
  • JavaScript设计模式之适配器模式

    万次阅读 2019-12-10 23:51:43
    适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。港式插头转换器 适配器的别名是包装器(wrapper),这是一个相对简单的...

    适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。港式插头转换器

    适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。

    现实中的适配器

    适配器在现实生活的应用非常广泛,接下来我们来看几个现实生活中的适配器模式。

    • 港式插头转换器
    • 电源适配器
    • USB转接口

    适配器模式的应用

    如果现有的接口已经能够正常工作,那我们就永远不会用上适配器模式。适配器模式是一种“亡羊补牢”的模式,没有人会在程序的设计之初就使用它。因为没有人可以完全预料到未来的事情,也许现在好好工作的接口,未来的某天却不再适用于新系统,那么我们可以用适配器模式把旧接口包装成一个新的接口,使它继续保持生命力。

    一句话概括就是创建一个方法可以使老的数据结构转换成咱们新需要的数据结构

    结语

    适配器模式是一对相对简单的模式。在本书提到的设计模式中,有一些模式跟适配器模式的结构非常相似,比如装饰者模式、代理模式和外观模式(参见第19章)。这几种模式都属于“包装模式”,都是由一个对象
    来包装另一个对象。区别它们的关键仍然是模式的意图。

    • 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。

    • 装饰者模式和代理模式也不会改变原有对象的接口,但装饰者模式的作用是为了给对象增加功能。装饰者模式常常形成一条长的装饰链,而适配器模式通常只包装一次。代理模式是为了控制对对象的访问,通常也只包装一次。

    • 外观模式的作用倒是和适配器比较相似,有人把外观模式看成一组对象的适配器,但外观模式最显著的特点是定义了一个新的接口。

    展开全文
  • JavaScript设计模式-适配器模式概念总结github仓库地址:点击 [设计模式例子](https://github.com/fanhualuoye/design) 查看 概念 适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,...

    概念

    • 适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本 由于接口不兼容而不能工作的两个软件实体可以一起工作。

    • 适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的 场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。 这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿 到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建 一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。

    • 现实中的适配器:转接头

    • 适配器模式是一种“亡羊补牢”的模式,没有人会在程序的设计之初就使用它。

    // 定义两个第三方的api,他们都是用show方法调用
            const googleMap = {
                show: function () {
                    console.log('开始渲染谷歌地图')
                }
            }
            const baiduMap = {
                show: function () {
                    console.log('开始渲染百度地图')
                }
            }
    
            // 这是我们自己的调用方法
            const renderMap = function (map) {
                if (map.show instanceof Function) {
                    map.show()
                }
            }
            renderMap(googleMap) // 输出:开始渲染谷歌地图
            renderMap(baiduMap) // 输出:开始渲染百度地图
    
            // 这段程序得以顺利运行的关键是 googleMap 和 baiduMap 提供了一致的 show 方法,
            // 但第三方的接口方法并不在我们自己的控制范围之内,假如 baiduMap 提供的显示地图的方法不叫 show 而叫display 呢?
    
            // 添加一个适配器
            const baiduMapAdapter = {
                 show: function(){
                     return baiduMap.display()
                 }
             }
            // // 通过适配器可以正常调用baiduMap了
            renderMap( googleMap ); // 输出:开始渲染谷歌地图
            renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图
    
    
            // 再来看看另外一个例子。假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源
            //里获得了广东省的所有城市以及它们所对应的 ID,并且成功地渲染到页面中:
            const getGuangdongCity = function () {
                const guangdongCity = [
                    {
                        name: 'shenzhen',
                        id: 11,
                    }, {
                        name: 'guangzhou',
                        id: 12,
                    }
                ]
                return guangdongCity
            }
            const render = function (fn) {
                console.log('开始渲染广东省地图数据', fn())
            }
            // render(getGuangdongCity)
    
            // 利用这些数据,我们编写完成了整个页面,并且在线上稳定地运行了一段时间。但后来发现
            // 这些数据不太可靠,里面还缺少很多城市。于是我们又在网上找到了另外一些数据资源,这次的
            // 数据更加全面,但遗憾的是,数据结构和正运行在项目中的并不一致。新的数据结构如下:
            // 就是我们想要用新的数据结构,新结构如下,但是不用改变原先的getGuangdongCity,只需要新增一个addressAdapter,去把旧数据转换成我们想要的格式
            const guangdongCity = {
                shenzhen: 11,
                guangzhou: 12,
                zhuhai: 13
            }
            console.log('新结构是这样的', guangdongCity)
            // 除了大动干戈地改写渲染页面的前端代码之外,另外一种更轻便的解决方式就是新增一个数
            // 据格式转换的适配器:
            const addressAdapter = function (oldAddressfn) {
                const address = {}
                const oldAddress = oldAddressfn()
                for (let i = 0; i < oldAddress.length; i++) {
                    const c = oldAddress[i]
                    address[c.name] = c.id
                }
                return function () {
                    return address
                }
            }
            // 把旧数据转成我们想要的
            render(addressAdapter(getGuangdongCity))
    

    总结

    • 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。
    • 当后端接口改了,但你又不想改原先代码,这个时候可以用这个

    github仓库地址:点击 设计模式例子 查看

    展开全文
  • 适配器模式是设计模式行为型模式中的一种模式;  定义:  适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修改已有接口,就可以使他们...
  • 适配器模式介绍 旧接口格式和使用者不兼容,中间加一个适配器转换接口 在生活中,我们有许多的适配器,例如iPhone7以后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的 lightning接口。许多人以前的圆孔耳机就需要...
  • 适配器模式的作用是解决两个软件实体间的接口不兼容的问题,在JavaScript尤其是AJAX方面比较常用,接下来看一下对Adapter适配器模式JavaScript设计模式编程中的运用分析
  • javascript-适配器模式

    2016-10-21 17:44:00
    适配器模式笔记 将一个类(对象)的接口(方法或属性)转化成另一个接口,以满足用户需求,使类(对象)之间接口的不兼容性问题通过适配器方法得以解决 demo实例:1.适配参数对象,使传入的参数完整 2.适配参数对象...
  •  适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序...
  • 主要介绍了javascript设计模式之Adapter模式,结合实例形式分析了JS适配器模式的原理与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
  • 适配器模式:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决 数据的适配 数据的适配在前端中是非常常见的场景,它解决了前后端的...
  • Javascript设计模式 - 12 - 适配器模式 简介 适配器模式就是,讲一个类的接口转换成客户希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作 作用 当使用一个...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 265
精华内容 106
关键字:

javascript适配器模式

java 订阅