JavaScript設(shè)計(jì)模式之原型模式和適配器模式示例詳解
原型模式
原型模式介紹
原型模式是指原型實(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ū)傩裕?，適配器模式使得原本由于接口不兼容而不能一起工作的那些類（對(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()) // 渲染百度地圖
小結(jié)
- 適配器模式主要解決兩個(gè)接口之間不匹配的問題，不會(huì)改變?cè)械慕涌?，而是由一個(gè)對(duì)象對(duì)另一個(gè)對(duì)象的包裝。
- 適配器模式符合開放封閉原則
以上就是JavaScript設(shè)計(jì)模式之原型模式和適配器模式示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 原型適配器模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用
這篇文章主要為大家介紹了ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了TypeScript獲取二叉樹的鏡像實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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實(shí)現(xiàn)方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來看看創(chuàng)建的詳細(xì)過程2021-11-11
這篇文章主要介紹了Java中的Script對(duì)象的相關(guān)資料,需要的朋友可以參考下文章里內(nèi)容2021-08-08
JS實(shí)現(xiàn)大數(shù)相加大數(shù)相乘示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)大數(shù)相加大數(shù)相乘示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
如果你學(xué)過面向?qū)ο缶幊?，那你肯定知道干什么用的，如果你沒有學(xué)過，那么暫時(shí)可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？2020-02-02
微信小程序 require機(jī)制詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 require機(jī)制詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 swiper的相關(guān)資料,需要的朋友可以參考下2016-10-10