JavaScript设计模式之原型模式和适配器模式示例详解

 更新时间:2022年08月26日 09:20:21   作者:RiemannHypothesis  
这篇文章主要为大家介绍了JavaScript 原型模式和适配器模式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

原型模式

原型模式介绍

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

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

代码实现

var lynkCoPrototype = {
    model: "领克",
    getModel: function () {
        console.log('车辆模具是:' + this.model);
    }
};
var volvo = Object.create(lynkCoPrototype, {
    model: {
        value: "沃尔沃"
    }
});
volvo.getModel();

适配器模式

适配器模式介绍

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

代码实现

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方法。

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())  // 渲染百度地图

小结

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

以上就是JavaScript设计模式之原型模式和适配器模式示例详解的详细内容,更多关于JavaScript 原型适配器模式的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序 地图定位简单实例

    微信小程序 地图定位简单实例

    这篇文章主要介绍了微信小程序 地图定位简单实例的相关资料,并附实例代码及实现效果图,需要的朋友可以参考下
    2016-10-10
  • 5个实用的JavaScript新特性

    5个实用的JavaScript新特性

    这篇文章主要为大家介绍了5个实用的JavaScript新特性,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 微信小程序(十一)icon组件详细介绍

    微信小程序(十一)icon组件详细介绍

    这篇文章主要介绍了微信小程序icon组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序 聊天室简单实现

    微信小程序 聊天室简单实现

    这篇文章主要介绍了微信小程序 聊天室简单实现的相关资料,需要的朋友可以参考下
    2017-04-04
  • javascript数据类型之原始类型详解

    javascript数据类型之原始类型详解

    这篇文章主要为大家介绍了javascript数据类型之原始类型详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JS深入浅出Function与构造函数

    JS深入浅出Function与构造函数

    这篇文章主要介绍了JS深入浅出Function与构造函数,Function是一个构造函数,可以通过该构造函数去创建一个函数,创建的函数是一个Function对象,具体内容请参考下面文章的详细内容,需要的朋友可以参考一下
    2021-12-12
  • Hooks封装与使用示例详解

    Hooks封装与使用示例详解

    这篇文章主要为大家介绍了Hooks封装与使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Vue.js React与Angular流行前端框架优势对比

    Vue.js React与Angular流行前端框架优势对比

    这篇文章主要为大家介绍了Vue.js React与Angular流行前端框架优势对比,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 自定义Toast实例代码

    微信小程序 自定义Toast实例代码

    这篇文章主要介绍了微信小程序 自定义Toast实例代码的相关资料,需要的朋友可以参考下
    2017-06-06
  • 微信小程序后台解密用户数据实例详解

    微信小程序后台解密用户数据实例详解

    这篇文章主要介绍了 微信小程序后台解密用户数据实例详解的相关资料,需要的朋友可以参考下
    2017-06-06

最新评论