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

 更新时间:2022年08月26日 09:20:21   作者:RiemannHypothesis  
这篇文章主要为大家介绍了JavaScript 原型模式和适配器模式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

原型模式

原型模式介绍

原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的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 原型适配器模式的资料请关注程序员之家其它相关文章!

相关文章

  • electron创建新窗口模态框并实现主进程传值给子进程

    electron创建新窗口模态框并实现主进程传值给子进程

    这篇文章主要为大家介绍了electron创建新窗口模态框并实现主进程传值给子进程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • js前端实现word?excel?pdf?ppt?mp4图片文本等文件预览

    js前端实现word?excel?pdf?ppt?mp4图片文本等文件预览

    这篇文章主要为大家介绍了js前端实现word?excel?pdf?ppt?mp4图片文本等文件预览示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JS代码检查工具ESLint介绍与使用方法

    JS代码检查工具ESLint介绍与使用方法

    ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,本文将详细介绍ESLint的使用方法
    2020-02-02
  • Javascript继承(上)——对象构建介绍

    Javascript继承(上)——对象构建介绍

    Javascript中除了基本数据(Undefined、Null、Boolean、Number、String),其他都是对象(Object)
    2012-11-11
  • 探索JavaScript未来模式匹配的引入分析

    探索JavaScript未来模式匹配的引入分析

    这篇文章主要来带大家探索JavaScript的未来,关于模式匹配的引入为编程体验带来革命性变化分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    这篇文章主要介绍了JavaScript构造函数与JavaScript原型,构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与?new?一起使用,构造函数通过原型分配的函数是所有对象所共享的。下面来看看文章的集体介绍内容吧
    2021-12-12
  • JavaScript复原何同学B站头图细节示例详解

    JavaScript复原何同学B站头图细节示例详解

    这篇文章主要为大家介绍了JavaScript复原何同学B站头图细节示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器实例详解(附源码下载)

    这篇文章主要介绍了微信小程序 省市区选择器实例详解的相关资料,区域间手势滑动切换,标题栏高亮随之切换,反之亦然;当前选中标题红色高亮;回到前一级点击某区域后,清空子代的区域,需要的朋友可以参考下
    2017-01-01
  • '2'>'10'==true?解析JS如何进行隐式类型转换

    '2'>'10'==true?解析JS如何进行隐式类型转换

    这篇文章主要为大家介绍了'2'>'10'==true?解析JS如何进行隐式类型转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 微信小程序 生命周期函数详解

    微信小程序 生命周期函数详解

    这篇文章主要介绍了微信小程序 生命周期函数的相关资料,需要的朋友可以参考下
    2017-05-05

最新评论

?


http://www.vxiaotou.com