ホームページ > 記事 > ウェブフロントエンド > js デザインパターン: プロキシパターンとは何ですか? jsプロキシモードの概要

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

不言オリジナル: 2018-08-17 16:09:141832ブラウズ

この記事では、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(&#39;img&#39;)
  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(&#39;loading.jpg&#39;) // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc(&#39;http://loaded.jpg&#39;)

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

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, &#39;,&#39;)
    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プロキシモードの概要