JavaScript デザインパターン開発におけるブリッジパターンの詳細な解釈 (上級)

ブリッジ モードは、イベント コールバック関数とインターフェイスの間のブリッジに加えて、パブリック API コードとプライベート実装コードを接続するためにも使用できます。JavaScript 設計の開発について詳しく説明します。ブリッジ パターンは、

ブリッジ パターンを使用して抽象部分を実装部分から分離し、両方が独立して変更され、調和して動作できるようにします。抽象部分と実装部分の両方は、相互に影響を与えることなく独立して変更できるため、コードの結合が減少し、コードのスケーラビリティが向上します。
GoF の定義によれば、ブリッジ パターンの役割は、「抽象化を実装から分離して、独立して変更できるようにする」ことです。このパターンは、JavaScript で一般的なイベント駆動型プログラミングに非常に役立ちます。

ブリッジ モードの最も一般的で実用的なアプリケーションの 1 つは、イベント リスナー コールバック関数です。例: イベント リスナーは、イベント処理ステートメントをコールバック関数にカプセル化し、実装ではなくインターフェイスを通じてプログラミングを実行します。

基本理論

ブリッジパターン定義: 抽象部分とその実装部分を分離し、両方が独立して変更できるようにします。
ブリッジモードは主に4つの役割で構成されます:
(1) 抽象クラス
(2) 拡張抽象クラス
(3) 実装クラスインターフェース
(4) 具象実装クラス
JavaScript言語の特性に合わせて簡略化していますそれぞれの役割:
(1) 拡張抽象クラス
(2) 具体的な実装クラス
ブリッジモードを理解するには？次にブリッジパターンの実装例を示します

ブリッジパターンの考え方を理解するには、抽象部分と実装部分を分離するという考え方を理解することが重要です。例で説明しましょう

最も単純なブリッジ モード

実際、私たちが最も頻繁に使用する jQuery の各関数は、次のようにその実装をシミュレートします:

var each = function (arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    var val = arr[i];
    if (fn.call(val, i, val, arr)) {
      return false;
    }
  }
}
var arr = [1, 2, 3, 4];
each(arr, function (i, v) {
  arr[i] = v * 2;
})

この例では、各関数 arr 配列は、この例は非常に一般的ですが、典​​型的なブリッジ モードが含まれています。

この例では、抽象部は前述の拡張抽象クラスである each 関数、実装部は具象実装クラスである fn です。抽象部分と実装部分は独立して変更できます。この例は単純ですが、典​​型的なブリッジ モード アプリケーションです。

プラグイン開発におけるブリッジ モード

ブリッジ モードに適用できるシナリオはコンポーネント開発です。私たちは通常、さまざまな状況に適応するようにコンポーネントを開発しますが、コンポーネントはそれに応じてさまざまな次元で変化します。ここでブリッジ パターンを適用して、その抽象化と実装を分離し、コンポーネントのスケーラビリティを高めることができます。 ポップアップウィンドウプラグインを開発するとします。ポップアップウィンドウには通常のメッセージリマインダー、エラーリマインダーなどの種類があり、それぞれ表示方法が異なります。これは典型的な多次元変化シナリオです。まず、通常のメッセージ ポップアップ ウィンドウとエラー メッセージ ポップアップ ウィンドウの 2 つのクラスを定義します。

function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

これら 2 つのクラスは、前述の抽象部分、つまり拡張抽象クラスです。両方ともメンバー アニメーションを含んでいます。
2 つのポップアップ ウィンドウは show メソッドによって表示されますが、表示されるアニメーション効果は異なります。次のように 2 つの表示効果クラスを定義します。

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

これら 2 つのクラスは、特定の表示効果を実装する特定の実装クラスです。では、それをどのように呼ぶのでしょうか?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

アニメーション効果を追加したい場合は、別の効果クラスを定義してそれを渡すことができます。

まとめ

ブリッジパターンを学習する鍵は、抽象部分と実装部分の分離を理解し、その 2 つが形式に制限されずに独立して変更できるようにすることです。 JS プラグインの柔軟な変更と適用可能なシナリオの変更は、このモードの実装に非常に適しています。ブリッジ パターンの使用で最も重要なことは、システム内の変化のさまざまな側面を特定することです。

(1) ブリッジ モードの利点:

抽象化と実装を分離し、ソフトウェアの各コンポーネントを個別に管理するのに役立ちます。
(2) ブリッジ モードの欠点: ブリッジ要素が使用されるたびに関数呼び出しが追加され、アプリケーションのパフォーマンスに悪影響を及ぼします。システムの複雑さの増加。ブリッジ関数を使用して 2 つの関数を接続し、一方の関数がブリッジ関数の外部から呼び出されない場合、現時点ではブリッジ関数は必要ありません。
ブリッジ パターンは、「抽象化と実装を分離して、独立して変更できるようにします。」コードのモジュール性を促進し、よりクリーンな実装を可能にし、抽象化の柔軟性を高めます。これは、クラスと関数のグループを接続するために使用でき、特権関数を利用してプライベート データにアクセスする手段を提供します。 上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptプログラム構築におけるデザインパターンにおける組み合わせパターンの使い方(上級編)

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

JavaScript デザインパターン開発における組み合わせパターンの使用に関するチュートリアル (上級)

以上がJavaScript デザインパターン開発におけるブリッジパターンの詳細な解釈 (上級)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。