广告位联系
返回顶部
分享到

JavaScript设计模式之原型模式和适配器模式介绍

JavaScript 来源:互联网 作者:佚名 发布时间:2022-08-28 08:48:19 人浏览
摘要

原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属

原型模式

原型模式介绍

原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性

实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__。

代码实现

1

2

3

4

5

6

7

8

9

10

11

12

var lynkCoPrototype = {

    model: "领克",

    getModel: function () {

        console.log('车辆模具是:' + this.model);

    }

};

var volvo = Object.create(lynkCoPrototype, {

    model: {

        value: "沃尔沃"

    }

});

volvo.getModel();

适配器模式

适配器模式介绍

适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。别称包装器(wrapper)。

代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

class GooleMap {

    show() {

        console.log('渲染谷歌地图')

    }

}

class BaiduMap {

    show() {

        console.log('渲染百度地图')

    }

}

function render(map) {

    if (map.show instanceof Function) {

        map.show()

    }

}

render(new GooleMap())  // 渲染谷歌地图

render(new BaiduMap())  // 渲染百度地图

但是假如BaiduMap类的原型方法不叫show,而是叫display,这时候就可以使用适配器模式了,因为我们不能轻易的改变第三方的内容。在BaiduMap的基础上封装一层,对外暴露show方法。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

class GooleMap {

    show() {

        console.log('渲染谷歌地图')

    }

}

class BaiduMap {

    display() {

        console.log('渲染百度地图')

    }

}

// 定义适配器类, 对BaiduMap类进行封装

class BaiduMapAdapter {

    show() {

        var baiduMap = new BaiduMap()

        return baiduMap.display()

    }

}

function render(map) {

    if (map.show instanceof Function) {

        map.show()

    }

}

render(new GooleMap())         // 渲染谷歌地图

render(new BaiduMapAdapter())  // 渲染百度地图

小结

  • 适配器模式主要解决两个接口之间不匹配的问题,不会改变原有的接口,而是由一个对象对另一个对象的包装。
  • 适配器模式符合开放封闭原则

版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7135825908090273800
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计