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

friend_ship

已于 2024-11-28 14:13:34 修改

阅读量325

点赞数

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

于 2021-01-15 11:24:12 首次发布

本文链接：https://blog.youkuaiyun.com/friend_ship/article/details/112649469

版权

JavaScript 同时被 3 个专栏收录

58 篇文章

订阅专栏

ES6

14 篇文章

订阅专栏

设计模式

3 篇文章

订阅专栏

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

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

生活的例子：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() {
        const val = this.adaptee.specialRequest();
        return `${val} - 转换器 - 3.5mm圆孔接口`
    }
}
 
// 测试数据
const target = new Target()
const res = target.request()
console.log(res)// 苹果专用接口 - 转换器 - 3.5mm圆孔接口

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