JavaScriptのデザインパターン - アダプタモード

　　モードは、行動パターンのモードアダプタのデザインパターンです。

　　定義：

　　アダプタは、既存のインターフェイスを変更する必要はありません、あなたがそれらを連携させることができ、アダプタは既存の2つのインターフェースの間のミスマッチの問題を解決するために使用、それはインタフェースが実装されている方法を検討する必要はありません、彼らは変更の未来はどのように考えていません。

　　方言の説明：

　　　3穴をされている電気の使用の結果の後に家に取る準備ができて、製品が2つだけ穴コンセント、電源コンセントとあなたの家族をサポートしていることを見つけ、あなたは良い経験にホームこの製品の魅力を取る準備ができて、いくつかの電化製品を買いましたソケット;あなたはそれを返すの電化製品店の周りに回すことができない、この時間は、突然アイデアを持っていた、あなたは自宅でそれを考えるだけでなく、多機能電源コンセントと多機能電源ソケットは、ちょうど3つの穴である、あなたは、あなたの多機能を思い付きます電源コンセントで電源コンセントプラグ、お使いのコンセントの電気機器は、2多目的ホールをソケット上のソケットに差し込まれ、その後聞かせて、快適な生活を楽しむために始める;ここで、マルチソケットアダプタです。

　　コードの実装：

VaRの Googleマップ= { 
    表示：機能（）{ 
        はconsole.log（「Googleマップ"をレンダリングを開始）; 
    } 
}; 
VARの baiduMap = { 
    表示：機能（）{ 
        はconsole.log（ 'Baiduのマップ'をレンダリングを開始）; 
    } 
}; 
VaRの RenderMap = 関数（マップ）{
     IF（map.show のinstanceofの機能）{ 
        map.show（）; 
    } 
}; 

RenderMap（Googleマップ）; //は、Googleマップのレンダリングを開始 
RenderMap（baiduMapを）; //は百度マップのレンダリングを開始します

　　もちろん、上記のコードが正常に動作することが可能である2つのオブジェクトのパラメータ名のおかげでは同じであるので、表示され、通常の動作が可能です。

VaRの Googleマップ= { 
    表示：機能（）{ 
        はconsole.log（「"Googleマップのレンダリングを開始）; 
    } 
}; 
VARの baiduMapは= { 
    表示：機能（）{ 
        はconsole.log（ '' Baiduのマップをレンダリングを開始）; 
    } 
};

　　ある日突然、メソッド名のbaiduMapがそれを変更した場合は？だから我々は、オブジェクトがこののないbaiduMapショー（）メソッドを持っていないため、操作上記と同様のは確かに、エラーになります話します。

　　パターンを変更するには、アダプタを使用します。

VaRの Googleマップ= { 
    表示：機能（）{ 
        はconsole.log（「"Googleマップのレンダリングを開始）; 
    } 
}; 
VARの baiduMapは= { 
    表示：機能（）{ 
        はconsole.log（ '' Baiduのマップをレンダリングを開始）; 
    } 
}; 
VaRの baiduMapAdapter = { 
    表示：関数は、（）{
         返すbaiduMap.display（）; 

    } 
}; 

RenderMap（Googleマップ）; // Googleマップのレンダリングを開始 
RenderMap（baiduMapAdapterを）; // レンダリングを開始するBaiduのマップ

　　アダプターんが、このコードでは実際には非常に簡単である、オブジェクトを作成し、同じ名前（）メソッドのショーを追加し、内部アダプタにbaiduMap.display（）メソッドを呼び出すことですので、我々は唯一のbaiduMapを呼び出す必要があります私たちは、所望の効果を達成するためのアダプタを呼び出すとき。

　　フロントエンドの開発者として私たちは、ページがデータを得ることを期待するとデータ形式は間違いなくより良く理解され、時には以前の開発モデルのこの恥ずかしい状況、最終的な終了が発生します。

　　我々は、すべてのUIコンポーネントやツール、ライブラリの多くは、指定されたデータフォーマットをレンダリングすることを知っているが、今回はバックエンドが知られていない、ので、データインターフェイスは、私たちがページ上で直接レンダリングされていることが動作しない場合がありますが、今回はボス彼はライン上に急いでする私たちを促したが、何の問題は、変更しないと判断しないバックエンド・データ・フォーマットだと主張し、この時間は、我々はフロントフォーマットされたデータアダプタモードを通ってくることができます。

　　バックエンドのデータ・フォーマットで返されるJSON：

[ 
  {
     "日"： "周一" 、
     "UV"：6300 
  }、
  {
     "日"： "周二" 、
     "UV"：7100 
  }、{
     "日"： "周三" 、
     "UV"：4300 
  }、{
     "日"： "周四" 、
     "UV"：3300 
  }、{
     "日"： "周五" 、
     "UV"：8300 
  }、{
     "日"： "周六" 、
     "UV"：9300 
  }、 {
     "日"： "周日" 、
     "UV"：11300 
  } 
]

　　Echartsチャートグラフィックに必要なデータ・フォーマット：

[ "火曜日"、 "火"、 "水曜日"、 "木曜日"、 "金曜日"、 "土曜日"、 "日曜日"] // データのx軸

[ 6300.7100、4300、3300、8300、 9300、11 300] // データは、座標点

　　心の痛みが、それでも我々は問題を解決する必要があります！解決するためのアダプタを使用します。

// X軸アダプタ
関数echartXAxisAdapter（RES）{
   戻り res.map（項目=> item.day）; 
} 

// 点アダプタ座標
関数echartDataAdapter（RES）{
   戻り res.map（項目=> item.uvを）; 
}

　　二つの機能は、データ処理の問題がecharts必要なデータ・フォーマットに従って解決することができるフォーマットするためにされている作成し、これら2つの方法は、実際に我々が指定されたルールを取得するために楽しみにして出力データ形式に指定されたデータへのアダプタ投げで;

　　要約：

　　　しかし、反復プロジェクトがする傾向があり、個人的に私は、プロジェクト開発の初期段階で、我々は、我々はアダプタモードよりも少ないを持っていないかもしれないなどのデータ形式やメソッド名を、期待して知っていた場合は、アダプタモードは、付け足し実際にデザインパターンのタイプだと思います、我々は通常、解決するために適合させるアダプタモードを使用することができたときに、データフォーマットやメソッド名の変更プロジェクトの反復の後には、予測不可能であり、当然のことながら、最善の解決策は、データフォーマットが終了する前と後の開発プロセスの相談や議論を投影することです、コード仕様ファイル名、プロジェクトが開発効率が大幅に改善されているようです。

JavaScriptのデザインパターン - アダプタモード

おすすめ