js デザイン パターン: プロキシ パターンとは何ですか? jsプロキシモードの概要

この記事では、JS デザイン パターンに関するコンテンツを提供します: プロキシ パターンとは何ですか? js プロキシ モードの導入には一定の参考価値があります。必要な方は参考にしていただければ幸いです。

プロキシモードとは何ですか?

シナリオ: シャオミンが女の子 A を追いかける

• 非エージェントモード: シャオミン=花=> 女の子 A

• エージェントモード: シャオミン=フア=> 女の子 A の友達 B に助けてもらう=フア= > Girl A

定義: このオブジェクトへのアクセスを制御するための他のオブジェクトのプロキシを提供します。

主な解決策: オブジェクトに直接アクセスするときに発生する問題。たとえば、アクセスされるオブジェクトがリモート マシン上にある場合。オブジェクト指向システムでは、一部のオブジェクトに直接アクセスすると、特定の理由 (たとえば、オブジェクトの作成にコストがかかる、特定の操作にセキュリティ制御が必要である、またはアウトプロセスが必要であるなど) により、ユーザーまたはシステム構造に多大な問題が発生します。このオブジェクトにアクセスするときに、このオブジェクトにアクセス レイヤを追加できます。

いつ使用するか: オブジェクトにアクセスするときに何らかの制御が必要です。

解決方法: 中間レイヤーを追加します。

応用例: 1. Windows のショートカット。 2. Zhu Bajie が Gao Cuilan を探しに行ったとき、彼は Sun Wukong であることが判明しました。これは次のように理解できます。Gao Cuilan の外観は抽象化されており、Zhu Bajie が Gao Cuilan を訪れたとき、Gao Cuilan と Sun Wukong の両方がこのインターフェイスを実装しました。彼はこれが孫悟空であるとは分からなかったので、孫悟空はガオ・翠蘭のエージェントクラスであると言われました。 3. 鉄道の切符は駅で購入する必要はなく、代理店に行っても購入できます。 4. 小切手または銀行預金証明書は、口座内の資金の代理となります。小切手は市場取引で現金の代わりに使用され、発行者の口座内の資金を管理します。 5.スプリングオープ。

利点: 1. 責任が明確です。 2. 高い拡張性。 3. インテリジェント。

短所: 1. クライアントと実際のサブジェクトの間にプロキシ オブジェクトが追加されるため、一部の種類のプロキシ モードではリクエストの処理速度が遅くなる可能性があります。 2. プロキシ モードの実装には追加作業が必要で、一部のプロキシ モードの実装は非常に複雑です。

使用シナリオ: 役割ごとに分けると、通常は次の使用シナリオがあります: 1. リモート エージェント。 2. 仮想エージェント。 3. コピーオンライトエージェント。 4. 保護 (保護またはアクセス) エージェント。 5. キャッシュエージェント。 6. ファイアウォールプロキシ。 7. 同期エージェント。 8. スマートリファレンスエージェント。

注: 1. アダプター パターンとアダプター パターンの違い: アダプター パターンは主に検討中のオブジェクトのインターフェイスを変更しますが、プロキシ パターンはプロキシ クラスのインターフェイスを変更できません。 2. デコレータ モードとデコレータ モードの違い: デコレータ モードは機能を拡張するものであり、プロキシ モードは機能を制御するものです。

プロキシ モードには多くの種類があり、JS で最も一般的に使用されるのは、仮想プロキシとキャッシュ プロキシです。

仮想プロキシは画像のプリロードを実装します

次のコードは、プロキシ モードを使用して画像のプリロードを実装していることがわかります。将来プリロードが必要ない場合は、プロキシ モードを次のように変更するだけです。リクエストプロキシオブジェクトの代わりにリクエストオントロジー。

const myImage = (function() {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc('loading.jpg') // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc('http://loaded.jpg')

キャッシュ プロキシは積計算を実装します

const mult = function() {
  let a = 1
  for (let i = 0, l; l = arguments[i++];) {
    a = a * l
  }
  return a
}

const proxyMult = (function() {
  const cache = {}
  return function() {
    const tag = Array.prototype.join.call(arguments, ',')
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()

proxyMult(1, 2, 3, 4) // 24

推奨事項: 開発中にプロキシ モードを使用する必要があるかどうかを推測しないでください。オブジェクトを直接使用するのが不便であると感じても、それを最適化するのに遅すぎるということはありません。

関連する推奨事項:

js デザイン パターン: 戦略パターンとは何ですか? js戦略パターン入門

jsデザインパターン：シングルトンパターンとは？ JSシングルトンパターンの紹介

以上がjs デザイン パターン: プロキシ パターンとは何ですか? jsプロキシモードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。