JavaScript デザインパターンの学習 アダプタパターン

概要

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

意味：

アダプタは、既存の 2 つのインターフェース間の不一致の問題を解決するために使用されます。インターフェースの実装方法や、将来的にインターフェースをどのように変更するかを考慮する必要はありません。アダプタは、既存のインターフェースを連携させるために変更する必要はありません。

俗語による説明:

あなたは電化製品を買って、その魅力を体験するために家に持ち帰るつもりでした。家に持ち帰って差し込もうとすると、その電化製品は2穴ソケットしかサポートしていないのに、家にある電源ソケットはすべて3穴ソケットであることがわかりました。電化製品店に行って商品を返品することはできません。突然、あなたはアイデアを思いつき、家にたまたま3つの穴がある多機能電源ソケットがあることを思い出しました。そこで、多機能電源ソケットを取り出して電源ソケットに差し込み、次に電化製品の電源ソケットを多機能ソケットの上にある2穴ソケットに差し込み、幸せな生活を楽しみ始めます。ここでの多機能ソケットはアダプターです。

コードの実装

var googleMap = {
    表示: 関数(){
        console.log('Google マップのレンダリングを開始します');
    }
};
var baiduMap = {
    表示: 関数(){
        console.log('Baidu Map のレンダリングを開始します');
    }
};
var renderMap = 関数(マップ){
    if ( map.show 関数のインスタンス){
        マップを表示します。
    }
};

renderMap( googleMap ); // Google Map のレンダリングを開始します renderMap( baiduMap ); // Baidu Map のレンダリングを開始します

もちろん、2 つのオブジェクトのパラメーター名が同じであるため、上記のコードは正常に実行され、正常に表示できます。

var googleMap = {
    表示: 関数(){
        console.log('Google マップのレンダリングを開始します');
    }
};
var baiduMap = {
    表示: 関数(){
        console.log('Baidu Map のレンダリングを開始します');
    }
};

ある日突然、baiduMap のメソッド名が変わったらどうなるでしょうか?上記のように実行すると、baiduMap オブジェクトに show() メソッドが存在しなくなるため、必ずエラーが発生します。

アダプター パターンを使用して以下を変更します。

var googleMap = {
    表示: 関数(){
        console.log('Google マップのレンダリングを開始します');
    }
};
var baiduMap = {
    表示: 関数(){
        console.log('Baidu Map のレンダリングを開始します');
    }
};
var baiduMapAdapter = {
    表示: 関数(){
        baiduMap.display() を返します。

    }
};

renderMap( googleMap ); // Google Map のレンダリングを開始します renderMap( baiduMapAdapter ); // Baidu Map のレンダリングを開始します

このコードでは、アダプタは非常に単純な処理を実行します。オブジェクトを作成し、同じ名前の show() メソッドを追加して、アダプタで baiduMap.display() メソッドを呼び出します。このように、目的の効果を得るには、baiduMap を呼び出すときにアダプタを呼び出すだけで済みます。

フロントエンド開発者として、私たちはページで期待されるデータとデータ形式をより深く理解する必要がありますが、フロントエンドとバックエンドが分離された開発モデルでは、次のような困った状況に遭遇することがあります。

多くの UI コンポーネントやツール ライブラリは指定されたデータ形式に従ってレンダリングされることは誰もが知っていますが、バックエンドは現時点ではこれを認識していません。そのため、インターフェイスからデータをページに直接正常にレンダリングできない可能性があります。このとき、上司はすぐにオンラインになるように促しますが、バックエンドはデータ形式が適切であると主張し、変更を拒否します。このとき、アダプタ モードを使用してフロントエンドでデータをフォーマットできます。

バックエンドから返される JSON データ形式は次のとおりです。

[
  {
    "日": "月曜日",
    "紫外線": 6300
  },
  {
    「日」：「火曜日」、
    "紫外線": 7100
  }, {
    "日": "水曜日",
    "紫外線": 4300
  }, {
    "日": "木曜日",
    "紫外線": 3300
  }, {
    "日": "金曜日",
    "紫外線": 8300
  }, {
    "日": "土曜日",
    "紫外線": 9300
  }, {
    "日": "日曜日",
    "紫外線": 11300
  }
]

Echarts チャート グラフィックには次のデータ形式が必要です:

["Tuesday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] //x軸データ [6300. 7100, 4300, 3300, 8300, 9300, 11300] //座標点データ

痛くても、問題を解決しなければなりません!アダプタを使用して解決します:

//x軸アダプタ関数 echartXAxisAdapter(res) {
  res.map(item => item.day) を返します。
}

//座標点アダプタ関数 echartDataAdapter(res) {
  res.map(item => item.uv) を返します。
}

この問題は、echarts で必要なデータ形式に従ってデータをフォーマットする 2 つの関数を作成することで解決できます。これらの 2 つのメソッドは、実際にはアダプターです。指定されたデータをこれに投入することで、指定されたルールに従って期待されるデータ形式を出力できます。

要約する

個人的には、アダプタ パターンは実際には損失を補うために使用される設計パターンであると考えています。プロジェクト開発の開始時に予想されるデータ形式やメソッド名がわかっている場合は、アダプタ パターンを使用することはありません。ただし、プロジェクトの反復は予測できないことがよくあります。プロジェクトの反復後にデータ形式やメソッド名が変更された場合、通常はアダプタ パターンを使用して適応して解決できます。もちろん、最善の解決策は、プロジェクト開発プロセス中にフロントエンドとバックエンドの間でデータ形式やファイル名などのコード仕様を交渉して話し合うことであり、これによりプロジェクトの開発効率が大幅に向上します。

以上がJavaScriptデザインパターン学習におけるアダプタパターンの詳細です。JavaScriptデザインパターンの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。