javaScript常用的设计模式——适配器模式（三）

设计模式：有助于提高代码的复用性和可维护性

适配器模式（Adapter Pattern）是作为两个不兼容接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以通过笔记本来读取内存卡。

意图

将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

主要解决

主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。

使用场景

1、系统需要使用现有的类，而此类的接口不符合系统的需要。
2、想要建立一个可以重复使用的类，用于与一些彼此之间没有太大关联的一些类，包括一些可能在将来引进的类一起工作，这些源类不一定有一致的接口。
3、通过接口转换，将一个类插入另一个类系中。（比如老虎和飞禽，现在多了一个飞虎，在不增加实体的需求下，增加一个适配器，在里面包容一个虎对象，实现飞的接口。）

优点

1、可以让任何两个没有关联的类一起运行。
2、提高了类的复用。
3、增加了类的透明度。
4、灵活性好。

缺点

1、过多地使用适配器，会让系统非常零乱，不易整体进行把握。比如，明明看到调用的是 A 接口，其实内部被适配成了 B 接口的实现，一个系统如果太多出现这种情况，无异于一场灾难。因此如果不是很有必要，可以不使用适配器，而是直接对系统进行重构。

应用实例

1、美国电器 110V，中国 220V，就要有一个适配器将 110V 转化为 220V。
2、在 LINUX 上运行 WINDOWS 程序。
3、axios中实现浏览器和node的兼容

代码实现

封装axios

//axios方法，返回一个适配器
function axios(config){
    //适配node和http，不管是哪种，都传入一个config，返回一个Promise
    let adaptor = getDefaultAdaptor()
    return adaptor(config);
}

//获取默认适配器
function getDefaultAdaptor(){
    let adaptor
    if(typeof XMLHttpRequest != 'undefined'){
        adaptor = xhr
    }else if(typeof process != 'undefined'){
        adaptor = Http
    }
    return adaptor
}

//封装xhr(浏览器) request请求
function xhr(config){
    return new Promise(function(resolve,reject){
        let request = new XMLHttpRequest()
        request.open(config.url,config.methods,true)
        request.onreadystatechange = function(){
            if(request.readyState == 4){
                if(request.status == 200){
                    resolve(request.responseText)
                }else{
                    reject('请求失败')
                }
            }
        }
        request.send()
    })
}

//封装node request请求
function Http(config){
    return new Promise(function(resolve,reject){
        let http = require('http')
        let url = require('url')
        let urlObject = url.parse(config.url)
        let options = {
            hostname:urlObject.hostname,
            port:urlObject.port,
            path:urlObject.path,
            methods:config.methods
        }
        let req = http.request(options,function(response){
            let chunks = []
            response.on('data',function(chunk){
                chunks.push(chunk)
            })
            response.on('end',function(){
                let result = Buffer.concat(chunks).toString()
                resolve(result)
            })
        })
        req.on('error',function(error){
            reject(error)
        })
        req.end()
    })
}

//调用axios
axios({
    url:'http://localhost:3000/api/user?id=9',
    methods:'GET'
}).then((res)=>{
    console.log(res)
},(err)=>{
    console.log(err)
})

常用的12种设计模式

• 工厂模式
• 单例模式
• 适配器模式
• 装饰器模式
• 代理模式
• 观察者与发布订阅者模式
• 策略模式
• 状态模式
• 桥接模式
• 组合模式
• 命令模式
• 享元模式