快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之原型模式和適配器模式示例詳解

更新時(shí)間：2022年08月26日 09:20:21 作者：RiemannHypothesis

這篇文章主要為大家介紹了JavaScript 原型模式和適配器模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

原型模式

原型模式介紹

原型模式是指原型實(shí)例指向創(chuàng)建對(duì)象的種類，并通過拷貝這些原型創(chuàng)建新的對(duì)象，是一種用來創(chuàng)建對(duì)象的模式，也就是創(chuàng)建一個(gè)對(duì)象作為另一個(gè)對(duì)象的prototype屬性

實(shí)現(xiàn)原型模式是在ECMAScript5中，提出的Object.create方法，使用現(xiàn)有的對(duì)象來提供新創(chuàng)建的對(duì)象的__proto__。

代碼實(shí)現(xiàn)

var lynkCoPrototype = {
    model: "領(lǐng)克",
    getModel: function () {
        console.log('車輛模具是：' + this.model);
    }
};
var volvo = Object.create(lynkCoPrototype, {
    model: {
        value: "沃爾沃"
    }
});
volvo.getModel();

適配器模式

適配器模式介紹

適配器模式（Adapter）是將一個(gè)類（對(duì)象）的接口（方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個(gè)接口（方法或?qū)傩裕m配器模式使得原本由于接口不兼容而不能一起工作的那些類（對(duì)象）可以一些工作。別稱包裝器（wrapper）。

代碼實(shí)現(xiàn)

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，這時(shí)候就可以使用適配器模式了，因?yàn)槲覀儾荒茌p易的改變第三方的內(nèi)容。在BaiduMap的基礎(chǔ)上封裝一層，對(duì)外暴露show方法。

class GooleMap {
    show() {
        console.log('渲染谷歌地圖')
    }
}
class BaiduMap {
    display() {
        console.log('渲染百度地圖')
    }
}
// 定義適配器類, 對(duì)BaiduMap類進(jìn)行封裝
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())  // 渲染百度地圖