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

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の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • JavaScript 複合パターン
  • JavaScript プログラミング デザイン パターン: Observer パターン (オブザーバー パターン) の例の詳細な説明
  • JavaScript デザイン パターン - アダプタ パターンの原則とアプリケーション例
  • JavaScriptアダプタパターンの原理と使用例の詳細な説明
  • JavaScript アダプター パターンの説明
  • NodeJS デザインパターンの概要 [シングルトンパターン、アダプタパターン、デコレータパターン、オブザーバーパターン]
  • JavaScript デザインパターンにおけるアダプタパターン [アダプタパターン] 実装例
  • JavaScript のアダプタ パターンを理解する

<<:  DockerでMySQLコンテナを作成する簡単な手順

>>:  win2008R2 64 ビット システムでの mysql5.7.17 のインストールと構成の例

推薦する

Dockerリポジトリの一般的なコマンドの詳細な説明

ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...

DOCTYPEタイプの詳細な紹介

<br />通常、HTML では次の方法で DOCTYPE を宣言します。 <!D...

ES6 の Set および WeakSet コレクションの詳細な説明

目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...

nginxでgzip圧縮を有効にする手順を完了する

目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...

Dockerを使用してJenkinsをインストールする方法

目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

MySQL 8.0.15 のダウンロードとインストールの詳細なチュートリアルは初心者にとって必須です。

この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...

JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明

目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...

JSでHTML本文のスタイルを変更する

目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...

Virtualbox で Ubuntu 16.04 の起動時に共有ディレクトリを自動的にマウントする最良の方法

仮想マシンを使用する人は通常、操作と使用を容易にするために仮想マシン用の共有ディレクトリを設定します...

MySQL8.0.18 複数マスターと 1 スレーブの構成

目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...