成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 設(shè)計(jì)模式（四）：適配者模式

MingjunYang / 490人閱讀

摘要：與其它模式的異同適配器模式不會(huì)改變?cè)薪涌?，這一點(diǎn)與裝飾者模式和代理模式類似。代理模式適配器模式與代理模式最相似，同樣都是創(chuàng)建一個(gè)新對(duì)象包裝一次，實(shí)現(xiàn)對(duì)本體的調(diào)用。外觀模式外觀模式與適配器模式最大的區(qū)別，是定義了一個(gè)新的接口。

適配器模式：將一個(gè)類（對(duì)象）的接口（方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個(gè)接口（方法或?qū)傩裕沟迷居捎诮涌诓患嫒荻荒芤黄鸸ぷ鞯哪切╊悾▽?duì)象）可以正常協(xié)作。簡單理解就是為兼容而生的 “轉(zhuǎn)換器”。

對(duì)于強(qiáng)迫癥患者，那么多形狀各異的接口，對(duì)應(yīng)著不同數(shù)據(jù)線。如果可以有一個(gè)轉(zhuǎn)接口實(shí)現(xiàn)集合兼容，豈不美哉。沒錯(cuò)，這樣一個(gè)適配器，你值得擁有。（各大廠商加把勁。。。）

生活小栗子：

港式插頭轉(zhuǎn)換器

筆記本電源適配器

Type-C 轉(zhuǎn)接口

模式特點(diǎn)

新包裝對(duì)象（適配器對(duì)象）實(shí)現(xiàn)對(duì)原對(duì)象接口的訪問（接口名可不同）

適配器對(duì)象不對(duì)請(qǐng)求數(shù)據(jù)做預(yù)處理，直接傳入原對(duì)象接口處理

適配器對(duì)象對(duì)外接口名統(tǒng)一，外部調(diào)用者可統(tǒng)一接口調(diào)用多對(duì)象方法

模式實(shí)現(xiàn) 
實(shí)現(xiàn)方式：在不改變?cè)袑?duì)象接口的基礎(chǔ)上，定義一個(gè)包裝對(duì)象，新對(duì)象轉(zhuǎn)接調(diào)用原有接口，使外部調(diào)用者可以正常使用。
第三方SDK的應(yīng)用 
// 適配器實(shí)現(xiàn)地圖SDK統(tǒng)一渲染
var googleMap = {
    show: function(){
        console.log("開始渲染谷歌地圖");
    }
};
var baiduMap = {
    display: function(){
        console.log("開始渲染百度地圖");
    }
};

// 外部實(shí)際調(diào)用的適配器對(duì)象
var baiduMapAdapter = {
    show: function() {
        return baiduMap.display();
    }
};

// 外部調(diào)用者
var renderMap = function(map) {
    map.show();   // 統(tǒng)一接口調(diào)用
}；

renderMap(googleMap);
renderMap(baiduMapAdapter);
ES6實(shí)現(xiàn)適配器 
// 使用ES6改寫適配器實(shí)現(xiàn)地圖SDK統(tǒng)一渲染
class googleMap {
  show() {
    console.log("開始渲染谷歌地圖");
  }
}

class baiduMap {
  display() {
    console.log("開始渲染百度地圖");
  }
}

class baiduMapAdapter extends baiduMap {
  constructor() {
    super();
  }

  show() {
    this.display();
  }
}

// 外部調(diào)用者
function renderMap(map) {
  map.show();   // 統(tǒng)一接口調(diào)用
}

renderMap(new googleMap());
renderMap(new baiduMapAdapter());
jQuery中的應(yīng)用

適配器模式非常適用于跨瀏覽器兼容，例如強(qiáng)大的 jQuery 封裝了事件處理的適配器，解決跨瀏覽器兼容性問題，極大簡化我們?nèi)粘＞幊滩僮鳌?/p> 

// $("selector").on 的實(shí)現(xiàn)
function on(target, event, callback) {
    if (target.addEventListener) {
        // 標(biāo)準(zhǔn)事件監(jiān)聽
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // IE低版本事件監(jiān)聽
        target.attachEvent(event, callback)
    } else {
        // 低版本瀏覽器事件監(jiān)聽
        target[`on${event}`] = callback
    }
}
適用場(chǎng)景

跨瀏覽器兼容

整合第三方SDK

新老接口兼容

適配器模式的初衷是為了解決多對(duì)象（接口）兼容問題，如果存在多對(duì)象協(xié)同工作時(shí)，不方便直接修改原對(duì)象的基礎(chǔ)上，可考慮用適配器封裝，以便外部調(diào)用者統(tǒng)一使用。

與其它模式的異同

適配器模式不會(huì)改變?cè)薪涌?，這一點(diǎn)與裝飾者模式和代理模式類似。

VS 代理模式

適配器模式與代理模式最相似，同樣都是創(chuàng)建一個(gè)新對(duì)象（包裝一次），實(shí)現(xiàn)對(duì)本體的調(diào)用。

兩者的區(qū)別：代理模式是為了管控原有對(duì)象（本體）的訪問，代理的初衷并不是為兼容，并主張代理與本體對(duì)外接口保持一致。

而適配器則是為兼容而生的 “轉(zhuǎn)換器”，并不預(yù)處理請(qǐng)求，直接將請(qǐng)求轉(zhuǎn)接給原接口，新接口與原接口名可能不同。

“代理模式“（嚴(yán)父）：學(xué)校繳費(fèi)要一千塊，這么多？
"適配器模式” (慈母）：學(xué)校繳費(fèi)要一千塊，給給給。

裝飾者模式及外觀模式，會(huì)在之后的篇章整理，這里稍作了解。

VS 裝飾者模式

裝飾者模式的作用是為對(duì)象添加功能，可添加多次，形成裝飾鏈。而適配器只會(huì)對(duì)原有對(duì)象包裝一次。

VS 外觀模式

外觀模式與適配器模式最大的區(qū)別，是定義了一個(gè)新的接口。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：兼容性，保證外部可統(tǒng)一接口調(diào)用

缺點(diǎn)：額外對(duì)象的創(chuàng)建，非直接調(diào)用，存在一定的開銷（且不像代理模式在某些功能點(diǎn)上可實(shí)現(xiàn)性能優(yōu)化）。

參考文章

《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)踐》

《JavaScript 設(shè)計(jì)模式系統(tǒng)講解與應(yīng)用》

《適配器在JavaScript中的體現(xiàn)》

本文首發(fā)Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以樂之名
本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105016.html

相關(guān)文章

  • Javascript之適配者模式

    摘要：適配者模式適配者模式主要用于解決兩個(gè)接口之間不匹配的問題。新接口希望是下面的形式這時(shí)候就可以采用適配者模式 適配者模式 適配者模式: 主要用于解決兩個(gè)接口之間不匹配的問題。demo const zhejiangCityOld = (function(){ return [ { name:hangzhou, id: 11, ...

    zhangrxiang 評(píng)論0 收藏0

  • “大話”設(shè)計(jì)模式

    摘要：抽象工廠模式是為了處理對(duì)象具有等級(jí)結(jié)構(gòu)以及對(duì)象族的問題。單例設(shè)計(jì)模式單例模式確保某一個(gè)類只有一個(gè)實(shí)例，而且自行實(shí)例化并向整個(gè)系統(tǒng)提供這個(gè)實(shí)例，這個(gè)類成為單例類。 導(dǎo)語：設(shè)計(jì)模式是無數(shù)碼農(nóng)前人在實(shí)際的生產(chǎn)項(xiàng)目中經(jīng)過不斷的踩坑、爬坑、修坑的經(jīng)歷總結(jié)出來的經(jīng)驗(yàn)教訓(xùn)，經(jīng)過抽象之后表達(dá)成的概念。能夠幫助后來的設(shè)計(jì)者避免重復(fù)同樣的錯(cuò)誤或者彎路。我也抽空整理了一下設(shè)計(jì)模式，用自己的話總結(jié)了一下，自認(rèn)...

    coordinate35 評(píng)論0 收藏0

  • 設(shè)計(jì)模式學(xué)習(xí)筆記：適配器模式

    摘要：二適配器模式概念適配器模式是一種結(jié)構(gòu)型模式，它的思想是將一個(gè)接口轉(zhuǎn)化為另一個(gè)接口。適配器模式包含四個(gè)角色對(duì)象定義所需要的方法請(qǐng)求者負(fù)責(zé)使用對(duì)象定義的方法來做具體的處理被適配者以持有方法的角色適配器使用被適配者的方法來滿足對(duì)象的需要。 一、結(jié)構(gòu)型設(shè)計(jì)模式 1、概念結(jié)構(gòu)型設(shè)計(jì)模式描述如何將類或者對(duì)象結(jié)合在一起形成更為復(fù)雜，功能更為強(qiáng)大的結(jié)構(gòu)。 2、分類（1）類結(jié)構(gòu)模型：這種結(jié)構(gòu)模型關(guān)心類的...

    CompileYouth 評(píng)論0 收藏0

  • JS 適配器模式

    摘要：另外，適配器模式和其它幾個(gè)模式可能容易讓人迷惑，這里說一下大概的區(qū)別適配器和橋接模式雖然類似，但橋接的出發(fā)點(diǎn)不同，橋接的目的是將接口部分和實(shí)現(xiàn)部分分離，從而對(duì)他們可以更為容易也相對(duì)獨(dú)立的加以改變。 1. 簡介 適配器模式（Adapter）是將一個(gè)類（對(duì)象）的接口（方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個(gè)接口（方法或?qū)傩裕m配器模式使得原本由于接口不兼容而不能一起工作的那些類（對(duì)象）可以一...

    Jeffrrey 評(píng)論0 收藏0

  • JavaScript 中常見設(shè)計(jì)模式整理

    摘要：開發(fā)中，我們或多或少地接觸了設(shè)計(jì)模式，但是很多時(shí)候不知道自己使用了哪種設(shè)計(jì)模式或者說該使用何種設(shè)計(jì)模式。本文意在梳理常見設(shè)計(jì)模式的特點(diǎn)，從而對(duì)它們有比較清晰的認(rèn)知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 開發(fā)中，我們或多或少地接觸了設(shè)計(jì)模式，但是很多時(shí)候不知道自己使用了哪種設(shè)...

    Nosee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<