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

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

亚连

リリース： 2018-05-21 14:01:54

オリジナル

1396 人が閲覧しました

アダプターパターンは、必要に応じてインターフェイスを変換 (または調整) し、必要なインターフェイスを含む別のオブジェクトを作成し、それをインターフェイスを変更するオブジェクトに接続して、この変換を完了します。 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:&#39;/getData&#39;,
  type:&#39;Post&#39;,
  dataType:&#39;json&#39;,
  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 サイトの他の関連記事を参照してください。