>[success] # 適配器模式 ~~~ 1.在了解裝飾器前，先了解適配器模式 ~~~ >[info] ## 適配器模式 ~~~ 1.適配器就好比安卓和蘋果的充電線，我們的目的是將這兩種系統的手機充電，但是需要做的是 將需要兩個不同充電線，可以理解電是他們的通用數據，不通用的只是兩者線我們需要寫一個適配 方法 2.網上最常見的解釋：比如連接不同數據庫的情況，你需要包裝現有的模塊接口，從而使之適配數據庫 —— 好比你手機使用轉接口來適配插座那樣； ~~~ >[danger] ##### 案例分析（鴨子進化） <a href='https://www.cnblogs.com/TomXu/archive/2012/04/11/2435452.html'>參考文章湯姆大叔</a> ~~~ 1.湯姆大叔這篇文章涉及的一個知識點，js的繼承下面對js繼承簡單講解 2.es5中js繼承幾個要素，第一個使用'apply'等更改指向，第二個'prototype ' 指向原型 ~~~ * 創建一個鴨子的父類，創建了一個繼承Duck 類的MallardDuck野鴨類，并重寫父類提供的方法 ~~~ // 創建 鴨子類 var Duck = function(){ }; Duck.prototype.fly = function(){ throw new Error('重寫') }; Duck.prototype.quack = function(){ throw new Error('重寫') }; // 創建一個繼承類 var MallardDuck = function () { //更改this 指向 Duck.apply(this); }; // 指定父類 MallardDuck.prototype = new Duck(); // 創建一個對象 var mDuck = new MallardDuck(); // 重寫 Duck 中的fly 方法 MallardDuck.prototype.fly = function () { console.log("可以飛翔很長的距離!"); } console.log(mDuck); ~~~ * 這時候創建一個火雞類父類，讓野火雞類繼承火雞類 ~~~ Turkey.prototype.fly = function(){ throw new Error(" 該方法必須被重寫 !"); }; Turkey.prototype.gobble = function(){ throw new Error(" 該方法必須被重寫 !"); }; //火雞 var WildTurkey = function () { Turkey.apply(this); }; WildTurkey.prototype = new Turkey(); //原型是Turkey WildTurkey.prototype.fly = function () { console.log("飛翔的距離貌似有點短!"); }; WildTurkey.prototype.gobble = function () { console.log("咯咯！咯咯！"); }; ~~~ * 現在 想讓野火雞 可以像野鴨子一樣叫，也就是讓野火雞有野鴨子的方法最簡單的方法 * 直接往野火雞中加一個野鴨子叫的方法，但假如說不想改變源碼的情況下我們制作一個殼子 * 這個殼子包裹住野火雞，就會有野鴨子的叫聲方法（開始適配） ~~~ var TurkeyAdapter = function(oTurkey){ // 要獲取具有適配目標對象的東西 Duck.apply(this); // 增加一個對象，這樣他可以擁有適配對象的所有方法 this.oTurkey = oTurkey; }; TurkeyAdapter.prototype = new Duck(); TurkeyAdapter.prototype.quack = function(){ // 把野火雞對象的叫法給了 鴨子，這樣調用鴨子叫就會出現野火雞的聲音 this.oTurkey.gobble(); }; ~~~ * 使用 ~~~ var oMallardDuck = new MallardDuck(); var oWildTurkey = new WildTurkey(); // 你是適配器 傳遞給你需要適配的目標 var oTurkeyAdapter = new TurkeyAdapter(oWildTurkey); //原有的鴨子行為 oMallardDuck.fly(); oMallardDuck.quack(); //原有的火雞行為 oWildTurkey.fly(); oWildTurkey.gobble(); //適配器火雞的行為（火雞調用鴨子的方法名稱） oTurkeyAdapter.quack(); ~~~ >[danger] ##### 適配不同對象同一方法名的調用適配器 <a href='https://blog.csdn.net/i10630226/article/details/81432636 '>參考文章 小平果118</a> ~~~ 1.知識點instanceof 判斷類型 ~~~ ~~~ const googleMap = { show: function () { console.log('開始渲染谷歌地圖'); } }; const baiduMap = { show: function () { console.log('開始渲染百度地圖'); } }; const renderMap = function (map) { if (map.show instanceof Function) { map.show(); } }; renderMap(googleMap); // 輸出：開始渲染谷歌地圖 renderMap(baiduMap); // 輸出：開始渲染百度地圖 ~~~ >[danger] ##### 針對數據適配 <a href='https://blog.csdn.net/i10630226/article/details/81432636 '>參考文章 小平果118</a> ~~~ 1.像我們將后臺數據格式清洗也算一種適配，下面將Echarts折線圖后臺返回的數據， 適配給前端使用 2.使用map重新定義數組格式 ~~~ * 后臺數據 ~~~ [ { "day": "周一", "uv": 6300 }, { "day": "周二", "uv": 7100 }, { "day": "周三", "uv": 4300 }, { "day": "周四", "uv": 3300 }, { "day": "周五", "uv": 8300 }, { "day": "周六", "uv": 9300 }, { "day": "周日", "uv": 11300 } ] ~~~ * js清洗適配數據 ~~~ // 清洗后的目標狀態 ["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //x軸的數據 // 清洗后的目標狀態[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐標點的數據 //x軸適配器 function echartXAxisAdapter(res) { return res.map(item => item.day); } //坐標點適配器 function echartDataAdapter(res) { return res.map(item => item.uv); } ~~~