JavaScript-适配器模式

最新推荐文章于 2023-04-26 21:41:17 发布

Globalizationa

最新推荐文章于 2023-04-26 21:41:17 发布

阅读量150

点赞数

分类专栏：技术

技术专栏收录该内容

563 篇文章 14 订阅

订阅专栏

适配器模式

旧接口格式和使用者不兼容
中间加一个适配转换接口

传统的UML类图

javascripy中的UML类图

class Adaptee {
    specificRequest(){
        return '德国标准的插头'
    }
}

class Target {
    constructor(){
        this.adaptee = new Adaptee()
    }
    request() {
        let info = this.adaptee.specificRequest()
        return `${info}-> 转换器->中国标准插头`
    }
}

// 测试
let target = new Target()

let res = target.request()

console.log(res)

使用场景

封装旧接口

// 自己封装的ajax，使用方式如下：
ajax({
    url: '/getData',
    type: 'Post',
    dataType: 'json',
    data:{
        id:"123"
    }
})
.done(function(){})
//但因为历史原因，代码中全是：$.ajax({...})

// 做一层适配器
var $ = {
    ajax:function(options){
        return ajax(options);
    }
}

vue computered

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <div id="example">
        <p>Original messageL:"{{message}}"</p>
        <p>Computed reversed message:"{{reversedMessage}}"</p>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#example",
            data: {
                message: "hello"
            },
            computed: {
                // 计算属性的getter
                reversedMessage: function () {
                    // 'this' 指向vm实例
                    return this.message
                        .split("")
                        .reverse()
                        .join("");
                }
            }
        });
    </script>
</body>

</html>

设计原则验证

将旧接口和使用者进行分离
符合开放封闭原则

Globalizationa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-适配器模式

适配器模式旧接口格式和使用者不兼容中间加一个适配转换接口传统的UML类图javascripy中的UML类图class Adaptee { specificRequest(){ return '德国标准的插头' }}class Target { constructor(){ this.adaptee = new Adaptee() } request() { let info = this.ada.
复制链接

扫一扫