浅谈 js设计模式—— 适配器模式

最新推荐文章于 2024-02-19 09:52:57 发布

friend_ship

最新推荐文章于 2024-02-19 09:52:57 发布

阅读量239

点赞数

分类专栏： ES6 JavaScript 设计模式文章标签： js适配器模式 ES6适配器 javascript vue.js

本文链接：https://blog.csdn.net/friend_ship/article/details/112649469

版权

JavaScript 同时被 3 个专栏收录

54 篇文章 1 订阅

订阅专栏

ES6

12 篇文章 0 订阅

订阅专栏

设计模式

3 篇文章 1 订阅

订阅专栏

定义：提供一个不同的接口，充当中间转换功能。

作用：解决两个对象间的接口不兼容的问题。使用适配器模式后，原本由于接口不兼容不能工作的两个对象可以一起工作。

生活的例子：iPhone7之后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的接口。那么以前的圆孔耳机就需要一个转换器（适配器），才能在新买的iPhone上听歌儿。

前端开发框架 vue computed属性，ES6类提供一个新的满足需求的方法，都是是适配器模式的实现场景。

vue computed 属性，适配器模式实现方式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>适配器模式</title>
  </head>
  <body>
    <div id="app">
        <p>顺序:{{ message }}</p>
        <p>逆序:{{ reversedMessage}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            computed: {
                reversedMessage: function() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
  </body>
</html>

ES6类，适配器模式的实现方式：

class Adaptee {
    specialRequest() {
        return '苹果专用接口'
    }
}


class Target {
    constructor() {
        this.adaptee = new Adaptee()
    }

    request() {
        let val = this.adaptee.specialRequest();
        return `${val} - 转换器 - 3.5mm圆孔接口`
    }
}

// 测试数据
let target = new Target()
let res = target.request()
console.log(res)

以上有任何问题，欢迎评论区留言。

friend_ship

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈 js设计模式—— 适配器模式

定义：提供一个不同的接口，充当中间转换功能。作用：解决两个对象间的接口不兼容的问题。使用适配器模式后，原本由于接口不兼容不能工作的两个对象可以一起工作。生活的例子：iPhone7之后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的接口。那么以前的圆孔耳机就需要一个转换器（适配器），才能在新买的iPhone上听歌儿。前端开发框架 vue computed属性，ES6类提供一个新的满足需求的方法，都是是适配器模式的实现场景。vue computed 属性，适配器模式实现方式：<!D
复制链接

扫一扫