JavaScript デザインパターンプロキシパターンの学習

概要

プロキシパターンは、デザインパターンの中でも構造デザインパターンに属します。

意味：

名前が示すように、オブジェクトへのアクセスを制御するために、オブジェクトの代替またはプレースホルダーを提供します。

俗語による説明:

多くの有名人にはエージェントがいます。商業公演やコンサートのためにエージェントに連絡したい場合は、まずエージェントに連絡する必要があります。エージェントと協力事項について話し合った後、エージェントはそれを有名人に伝え、有名人は活動に参加します。家を借りる場合も同じです。家を借りる場合でも買う場合でも、私たちの最初の反応は間違いなくLianjiaのようなプラットフォームを見つけることです。なぜなら、私たちはLianjiaと連絡を取るだけでよく、Lianjiaが家主と連絡を取るので、家主と直接連絡を取る手間が省けるからです。Lianjiaは代理店モデルであるため、家主の住宅リソースのエージェントとして機能します。

実装

例えば：

スターチェイサーとして、あなたはスターの熱心なファンです。たまたまそのスターの誕生日が近づいており、あなたは自分の気持ちを表現するために贈り物を送ろうとしています。通常の手順は次のとおりです。

var ファン = {
    花（）{
        star.reception("花");
    }
}

var スター = {
    受付:関数(ギフト){
        console.log("ファンから受け取りました: "+ギフト);
    }
}

Fans.flower(); //ファンから花を受け取る

あなたは、彼女があなたの愛を感じてくれることを願って、花を買って彼女に送ることを選びました。しかし、理想は満ち溢れていて、現実はとても貧弱であることが多いのです。エージェントを忘れないでください。贈り物にサインするのはスター本人ではなく、エージェントであることが多いからです。

var ファン = {
    花（）{
        Agent.reception("花");
    }
}

var エージェント = {
    受付:関数(ギフト){
        console.log("ファンからの贈り物: "+gift); //ファンからの贈り物: flowersstar.reception("flowers");
    }
}
var スター = {
    受付:関数(ギフト){
        console.log("ファンから受け取りました: "+ギフト);
    }
}

Fans.flower(); //ファンから花を受け取った

ここでのエージェントは単なるエージェントです。ファンはまずエージェントに贈り物を渡し、その後エージェントがそれをスター本人に渡します。

保護エージェント

ファンから送られてきた小包を見てスターは大喜びし、それを開けてみると、花が入っていたことが分かった！スターは非常に軽蔑していたので、彼はエージェントに、今後私に花を送ってきた人はもう送らないで、自分で対処するように言いました。

var ファン = {
    花（）{
        Agent.reception("花");
    }
}

var エージェント = {
    受付:関数(ギフト){
        console.log("ファンからのギフト: "+gift); //ファンからのギフト: flowersif(gift != "flowers"){
            star.reception("花");
        }
      
    }
}
var スター = {
    受付:関数(ギフト){
        console.log("ファンから受け取りました: "+ギフト);
    }
}

ファン.flower();

上記の番組では、ファンが送った花束をスターがまったく受け取らなかったが、それはエージェントによって傍受され、処理されたためである。エージェントを通して一部の贈り物をフィルタリングすることを保護エージェントと呼ぶ。

仮想エージェント

もしスターたちがファンから送られた花を受け取らないのであれば、ファンは考え方を変えて、スターたちが欲しいものを買えるようにお金をあげればいいのです！そこで彼はエージェントを探し、そのエージェントに現金100万ドルを渡し、それをスター本人に渡すように頼んだ。

関数 Money(){
    this.total = "現金100万"
   this.total を返します。
}
var ファン = {
    花（）{
        エージェント.受信();
    }
}

var エージェント = {
    受付:関数(){
        // console.log("ファンからのギフト: "+gift);
        money = new Money();
        star.reception(お金.合計);
      
    }
}
var スター = {
    受付:関数(ギフト){
        console.log("ファンから受け取りました: "+ギフト); //ファンから受け取りました: 現金 100 万}
}

ファン.flower();

スターは 100 万ドルを受け取ったとき、とても喜びました。100 万ドルは使われなかったため、エージェントによって傍受およびフィルタリングされませんでした。そのため、スターはそれを直接受け取りました。このモデルを仮想エージェントモデルと呼びます。

画像の遅延読み込みを実現する仮想プロキシ

プロキシがない場合、コードは次のようになります。

// エンティティオブジェクトを作成する var myImage = (function(){
  // タグを作成します var imgNode = document.createElement( 'img' );
  // ページに追加 document.body.appendChild( imgNode );
  戻る {
    // 画像のsrcを設定する
    setSrc: 関数(src) {
      // ソースを変更
      src を src にコピーします。
    }
  }
})();

myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

仮想エージェント

// エンティティオブジェクトを作成する var myImage = (function(){
  // タグを作成します var imgNode = document.createElement( 'img' );
  // ページに追加 document.body.appendChild( imgNode );
  戻る {
    // 画像のsrcを設定する
    setSrc: 関数(src) {
      // ソースを変更
      src を src にコピーします。
    }
  }
})();

// プロキシオブジェクトを作成する var proxyImage = (function(){
  // 新しい img タグを作成します var img = new Image;
  // 画像読み込み完了イベント img.onload = function(){
    // src メソッドを置き換えるには myImage を呼び出します myImage.setSrc( this.src );
  }
  戻る {
    // プロキシ設定アドレス setSrc: function( src ){
      // プリロード読み込み
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // 通常の画像アドレスを割り当てます img.src = src;
    }
  }
})();

proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

上記のコードでは、プロキシモードを使用して画像のプリロードを実装しています。プロキシモードでは、画像の作成とプリロードロジックが巧みに分離されていることがわかります。将来、プリロードが不要になった場合は、リクエストプロキシオブジェクトではなく、リクエストボディを変更するだけです。

以上がJavaScriptデザインパターン学習におけるプロキシパターンの詳しい内容です。JavaScriptデザインパターンについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！

以下もご興味があるかもしれません: