JavaScript設(shè)計模式之原型模式和適配器模式示例詳解
更新時間：2022年08月26日 09:20:21 作者：RiemannHypothesis
這篇文章主要為大家介紹了JavaScript 原型模式和適配器模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
原型模式
原型模式介紹
原型模式是指原型實例指向創(chuàng)建對象的種類，并通過拷貝這些原型創(chuàng)建新的對象，是一種用來創(chuàng)建對象的模式，也就是創(chuàng)建一個對象作為另一個對象的prototype屬性
實現(xiàn)原型模式是在ECMAScript5中，提出的Object.create方法，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__。
代碼實現(xiàn)
var lynkCoPrototype = {
model: "領(lǐng)克",
getModel: function () {
console.log('車輛模具是：' + this.model);
}
};
var volvo = Object.create(lynkCoPrototype, {
model: {
value: "沃爾沃"
}
});
volvo.getModel();
適配器模式
適配器模式介紹
適配器模式（Adapter）是將一個類（對象）的接口（方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個接口（方法或?qū)傩裕?，適配器模式使得原本由于接口不兼容而不能一起工作的那些類（對象）可以一些工作。別稱包裝器（wrapper）。
代碼實現(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，這時候就可以使用適配器模式了，因為我們不能輕易的改變第三方的內(nèi)容。在BaiduMap的基礎(chǔ)上封裝一層，對外暴露show方法。
class GooleMap {
show() {
console.log('渲染谷歌地圖')
}
}
class BaiduMap {
display() {
console.log('渲染百度地圖')
}
}
// 定義適配器類, 對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()) // 渲染百度地圖
小結(jié)
- 適配器模式主要解決兩個接口之間不匹配的問題，不會改變原有的接口，而是由一個對象對另一個對象的包裝。
- 適配器模式符合開放封閉原則
以上就是JavaScript設(shè)計模式之原型模式和適配器模式示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 原型適配器模式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項目中使用
這篇文章主要為大家介紹了ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項目中使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了TypeScript獲取二叉樹的鏡像實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Uncaught EvalError:Refused to evaluate a
這篇文章主要為大家介紹了Uncaught EvalError:Refused to evaluate a string as JavaScript解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了Tree Shaking實現(xiàn)方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了利用JS創(chuàng)建一個錄屏功能，創(chuàng)建這個功能錢我們首先創(chuàng)建一個HTML文件，包含記錄按鈕和一個播放標(biāo)簽，下面來看看創(chuàng)建的詳細(xì)過程2021-11-11
這篇文章主要介紹了Java中的Script對象的相關(guān)資料,需要的朋友可以參考下文章里內(nèi)容2021-08-08
JS實現(xiàn)大數(shù)相加大數(shù)相乘示例詳解
這篇文章主要為大家介紹了JS實現(xiàn)大數(shù)相加大數(shù)相乘示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
如果你學(xué)過面向?qū)ο缶幊?，那你肯定知道干什么用的，如果你沒有學(xué)過，那么暫時可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？2020-02-02
這篇文章主要介紹了微信小程序 require機制詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 swiper的相關(guān)資料,需要的朋友可以參考下2016-10-10