JavaScript のデザインパターンにアダプターパターンを実装する方法の詳細な説明 (グラフィックチュートリアル)

アダプター パターンは、必要に応じてインターフェイスを変換 (または調整) し、必要なインターフェイスを含む別のオブジェクトを作成し、それをインターフェイスを変更するオブジェクトに接続して、この変換を完了します。 JavaScript の実装設計について詳しく説明します。以下は、パターン内のアダプター パターン メソッドです

開発プロセス中に、クライアントが必要とするインターフェイスが、提供されたインターフェイスと互換性がないことが判明することがあります。特別な理由により、クライアント インターフェイスを変更できません。この場合、既存のインターフェイスと互換性のないクラスを適応させる必要があり、アダプター パターンが必要になります。アダプターを使用すると、古いコードを変更せずに使用できるようになります。これがアダプターの威力です。
適応モードは、既存のインターフェースと互換性のないクラスの間で適応するために使用できます。このモードを使用するオブジェクトは、別のオブジェクトを新しいインターフェースでラップしているため、ラッパーとも呼ばれます。
表面的には、アダプター モードは外観モードによく似ています。これらはすべて他のオブジェクトをラップし、それらが表示するインターフェイスを変更します。 2 つの違いは、インターフェイスをどのように変更するかです。ファサード要素は、追加のオプションを提供しない単純化されたインターフェイスを提供し、一般的なタスクの完了を容易にするために仮定を行う場合があります。アダプターは、あるインターフェイスを別のインターフェイスに変換し、特定の機能を除外したり、インターフェイスを簡素化したりしません。クライアント システム API が使用できない場合は、アダプターが必要です。

基本理論

アダプターパターン: クライアントのコードを変更せずに、インターフェイスをクライアントが必要とするインターフェイスに変換し、互換性のないコードが連携できるようにします。

アダプターは主に3つの役割で構成されます:
(1) クライアント: インターフェースを呼び出すクラス
(2) アダプター: クライアントインターフェースとサービスを提供するインターフェースを接続するクラス
(3) アダプター: サービスを提供ですが、サービス クラスはクライアント インターフェイスの要件と互換性がありません。

アダプター パターンの実装

1. 最も単純なアダプター

アダプター パターンは想像されているほど複雑ではありません。
クライアントは加算計算を実行するメソッドを呼び出します:

var result = add(1,2);

ただし、add メソッドは提供しません。同じ機能を持つ sum メソッドを提供します:

function sum(v1,v2){
  return v1 + v2;
}

クライアントとサーバーの変更を避けるために、ラッパー関数:

function add (v1,v2){
  reutrn sum(v1,v2);
}

これは、互換性のない 2 つのインターフェイス間にラッピング メソッドを追加し、このメソッドを使用して 2 つを接続し、連携できるようにします。

2. 実用的なアプリケーション

フロントエンド フレームワークの開発に伴い、DOM 要素を操作せずにデータを操作するだけで済む開発者が増えてきており、jQuery の役割はますます少なくなっています。役割。サーバーからデータをリクエストするには jQuery が提供する ajax を使用する必要があるため、多くのプロジェクトは依然として jQuery ライブラリをツール クラスとして参照しています。プロジェクトにおける jQuery の役割が ajax ツール ライブラリとしてのみである場合、強力なツールで鶏を殺すような気分になり、リソースの無駄になります。現時点では、独自の ajax ライブラリを完全にカプセル化できます。
カプセル化した ajax が関数を通じて使用されるとします。

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

呼び出しインターフェイス ajax と jQuery の $.ajax の違いを除いて、その他はすべてまったく同じです。
プロジェクト内には ajax を要求する箇所がたくさんあるはずです。jQuery を置き換える場合、$.ajax を 1 つずつ変更するのは不可能です。では、このとき、アダプターを追加できます:

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

既存のコードの変更を避けるために、古いコードと新しいインターフェイスとの互換性が必要です。

概要

アダプター パターンの原理は非常に単純です。新しいパッケージング クラスを追加して新しいインターフェイスをラップし、古いコードの呼び出しに適応させ、インターフェイスの変更やコードの呼び出しを避けることです。
適用可能なシナリオ: 古いインターフェイスへのコード呼び出しが多数あり、古いコードの変更や新しいインターフェイスの置き換えを避けるために、アプリケーション シナリオは既存の実装方法に影響を与えません。

1. アダプターモードの適用場面: アダプターは、お客様のシステムが期待するインターフェースが既存の API によって提供されるインターフェースと互換性がない状況に適しています。アダプターによって適応された 2 つのメソッドは同様のタスクを実行する必要があります。そうしないと、問題は解決されません。ブリッジ要素やファサード要素と同様に、アダプターを作成すると、抽象化を実装から分離して、両方を独立して変更できるようになります。

2. アダプター パターンの利点: 既存のクラスのインターフェイスを新しいインターフェイスでラップすることで、クライアント プログラムは、大規模な手術を行うことなく、そのクラスに合わせて作られていないこのクラスを使用できます。

3. アダプター パターンの欠点: アダプターは不要なオーバーヘッドであり、既存のコードを書き直すことで完全に回避できると考える人もいます。さらに、アダプター パターンでは、サポートする必要がある多数の新しいツールも導入されます。既存の API がまだ完成していない場合、または新しいインターフェースがまだ完成していない場合、アダプターは常に機能するとは限りません。
大規模なシステムやレガシー フレームワークが関係する場合、多くの場合、その利点が欠点を上回ります。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptの構成の実装(BOMとDOMの詳細な解釈)

JavaScriptデザインパターンプログラミングにおけるAdapterアダプタパターンの適用の概要(画像とテキストのチュートリアル)

JavaScript配列におけるsome()とfilter()の使い方と違い(コード付き)

以上がJavaScript のデザインパターンにアダプターパターンを実装する方法の詳細な説明 (グラフィックチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。