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 のインストールと構成の例

推薦する

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...

CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...

htmlダウンロード機能の詳しい説明

新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...

Linux で一般的なソフトウェアを設定する方法

新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...

Dockeにredisをインストールする方法

1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...

three.js を使って立体的な矢印線を描く詳細な手順

需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

純粋なCSS3で実装されたネオンライト効果

達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...