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 原型适配器模式的资料请关注脚本之家其它相关文章!

相关文章

  • ECharts transform数据转换和dataZoom在项目中使用

    ECharts transform数据转换和dataZoom在项目中使用

    这篇文章主要为大家介绍了ECharts transform数据转换和dataZoom在项目中使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • TypeScript获取二叉树的镜像实例

    TypeScript获取二叉树的镜像实例

    这篇文章主要为大家介绍了TypeScript获取二叉树的镜像实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Uncaught EvalError:Refused to evaluate a string as JavaScript解决

    Uncaught EvalError:Refused to evaluate a

    这篇文章主要为大家介绍了Uncaught EvalError:Refused to evaluate a string as JavaScript解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Tree Shaking实现方法指南

    Tree Shaking实现方法指南

    这篇文章主要为大家介绍了Tree Shaking实现方法指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 用JS创建一个录屏功能

    用JS创建一个录屏功能

    这篇文章主要介绍了利用JS创建一个录屏功能,创建这个功能钱我们首先创建一个HTML文件,包含记录按钮和一个播放标签,下面来看看创建的详细过程
    2021-11-11
  • JavaScript对象(详细)

    JavaScript对象(详细)

    这篇文章主要介绍了Java中的Script对象的相关资料,需要的朋友可以参考下文章里内容
    2021-08-08
  • JS实现大数相加大数相乘示例详解

    JS实现大数相加大数相乘示例详解

    这篇文章主要为大家介绍了JS实现大数相加大数相乘示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JS中this的4种绑定规则详解

    JS中this的4种绑定规则详解

    如果你学过面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,this既不指向函数自身,也不指函数的词法作用域,具体怎么使用JS中的this,JS中的this绑定规则又是什么?
    2020-02-02
  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解及实例代码

    这篇文章主要介绍了微信小程序 require机制详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • 微信小程序 教程之wxapp视图容器 swiper

    微信小程序 教程之wxapp视图容器 swiper

    这篇文章主要介绍了微信小程序 教程之wxapp视图容器 swiper的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论