JSデザインパターン - エージェントモデル

プロキシモード

代替プロキシモード又はそれへのアクセスを制御するために、プレースホルダオブジェクトの通りです。

エージェントモデルの生活の中で多くのシーンがあります。例えば、薬剤としてスターブローカーは、ブローカーや秘書を見つけ、物事が存在する場合には、プロキシボス秘書としてなど、があり、その後、星や上司によってそれらを伝えます。

まず、理解するために理解するための簡単な例を通じて、話はこれです...

以下の話は純粋に架空である、真剣にそれを取ることはありません

我々は、すべてのハイライトそれは、諸葛孔明人の並べ替えは、強力な、評判ああをしない(Baiduはおよそ知らない)ということを知っています。劉備が知っているまあ、それはたまたま、劉備は考えた:「だから強力な人々が、私は以下の宮は、3カ国は、角を曲がったところに始まっ統一ではないでしょう」、そう、劉備は他の人に贈り物と一緒に行ってください。通常のプロセスでは、このようになります。

// 刘备
let bei = {
  // 邀请
  invite(){
    liang.reception('草鞋')
  }
}
// 亮
let liang = {
   // 收到礼物
   reception(gift){
     console.log('亮收到礼物:' + gift)
   }
}
// 调用方法
bei.invite()

しかし、その後、そうではありません、諸葛孔明は考えた:「劉備販売サンダルは私に会いたいと思った?」それでは、劉備はドアマンに見ました:

// 刘备
let bei = {
  // 邀请
  invite(){
    mentong.reception('草鞋')
  }
}
// 门童
let mentong = {
  // 接收礼物
  reception(gift){
    console.log('门童收到礼物:' + gift)
    // 给诸葛亮
    liang.reception('草鞋')
  }
}
// 亮
let liang = {
  // 接收礼物
  reception(gift){
    console.log('亮收到礼物:' + gift)
  }
}
// 调用方法
bei.invite()

そのため、劉備はドアマンへの贈り物、諸葛孔明に引き渡さドアマン、諸葛孔明ルック、グッドフェローズ、サンダルすることができます。

これは単純なエージェントとして見ることができます

保護エージェントと警告

保護エージェント

サイレント諸葛孔明も受けたサンダルは、その後、ドアマンは彼に言ったと呼ばれる:「それは後に、サンダルを送って、あなたは彼が契約のように見えたことを私に与えていない、」ヒントを取るためにドアマンは、[OK]を表明しました

// 门童
let mentong = {
  // 接收礼物
  reception(gift){
    console.log('门童收到礼物:' + gift)
    if(gift !== '草鞋'){
      // 给诸葛亮
      liang.reception('草鞋')
    }
  }
}

いくつかの不要な物事に対処するためのプロキシ(ドアマン)を通じて、として理解することができ、無駄な情報、フィルタリング保護エージェントを

我々はオブジェクトへのアクセス権を持つユーザーを判別できないため、しかし、JavaScriptは、保護庁を達成することは容易ではありません。

アラート

このトピックでは、この贈り物は、2日間に添付されている劉備、劉備に戻り、人々を参照してくださいました。誰かが方法から彼を与えました。だから、ああ、私はドアマンが言っ見つけるために行ってきました:賢くなったときに「リトル兄弟があなたにこのお金を取った、あなたは私が氏の諸葛のための贈り物を購入するため、」ドアマンはびっくりです

// 门童
let mentong = {
  // 接收礼物
  reception(){
    // 拿钱去买礼物
    let book = new Book()
    // 给诸葛亮
    liang.reception(book)
  }
}

諸葛孔明、この時間は非常に満足して、私は劉備を参照することに合意した(〜¯▽¯)〜

これは、として理解することができるアラート

アラートは、事前に読み込んだ画像を実現します

注:私はこのケースを知っている、我々は(作る変更する考え)思考のは良い例がありますので、見ているかもしれないが、この例では、私ははっきり行ずつ説明しますO(¯▽¯)BU

通常、貧しい人々のネットワークに起因する、それが空白になります前に、絵になります。だから我々は、制限されたloading非同期モード負荷ピクチャーインピクチャープレースホルダを

演技の役に立ちません

// 创建一个本体对象
var myImage = (function(){
  // 创建标签
  var imgNode = document.createElement( 'img' );
  // 添加到页面
  document.body.appendChild( imgNode );
  return {
    // 设置图片的src
    setSrc: function( src ){
      // 更改src
      imgNode.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 );
  return {
    // 设置图片的src
    setSrc: function( src ){
      // 更改src
      imgNode.src = src;
    }
  }
})();

// 创建代理对象
var proxyImage = (function(){
  // 创建一个新的img标签
  var img = new Image;
  // img 加载完成事件
  img.onload = function(){
    // 调用 myImage 替换src方法
    myImage.setSrc( this.src );
  }
  return {
    // 代理设置地址
    setSrc: function( src ){
      // 预加载 loading
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // 赋值正常图片地址
      img.src = src;
    }
  }
})();

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

今、私たちはすることができproxyImage、間接的にアクセスしますMyImageproxyImage顧客の管理MyImageアクセス、
および先の工程でimgノードがsrcローカルに設定されているloading画像


今度は、事前に負荷を見てみましょう剤なしで達成され、

// 创建一个本体对象
var MyImage = (function(){
  // 创建标签
  var imgNode = document.createElement( 'img' );
  // 添加到页面
  document.body.appendChild( imgNode );
  //  创建一个新的img标签
  var img = new Image;
  // img 加载完成
  img.onload = function(){
    // 替换地址
    imgNode.src = img.src;
  };
  return {
    // 设置地址
    setSrc: function( src ){
      // 本地 loading 图片地址
      imgNode.src = 'file:// /C:/Users/svenzeng/Desktop/loading.gif';
      // 赋值正常图片地址
      img.src = src;
    }
  }
})();

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

今、プロキシを使用していませんでしたコードを見て

  • 原則として、単一の違反。また、だけでなく、事前に読み込んだ画像のIMGノードを設定するための責任MYIMAGEします。これが任務の一つに対処する上での強い結合の責任に影響する別につながります。
  • 開閉の原則の違反。あなたは事前に負荷を取り除くしたい場合は、唯一の開閉の原則に準拠していないMYIMAGEオブジェクトを、変更します。

一貫性のエージェントとボディインタフェース

私たちはもはや負荷を事前に必要な1日は、それはもはやプロキシオブジェクトが必要な場合は、直接身体を要求するように選択することはできません。キーは、異物や体のエージェントが提供されているsetSrcユーザに対して透過的で、ユーザーがそうするように、エージェントと身体との違いを知らない顧客の観点から、プロキシオブジェクトと体が同じで、プロセスは、政府機関の要請を引き継いだ、方法を2つの利点があります。

  • ユーザーが安全にブローカーを要求することができ、彼はあなたが望む結果を取得するかどうかを気に。
  • どこにでも体を使用すると、プロキシを使用することによって置き換えることができます。(それが味を置き換えるリヒター上のビットではありません)
// 预加载
proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

// 不用预加载
myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

キャッシュプロキシ

古典的なああ(私は、何かを期待して、将来を考えると戻っていなかった(〜¯▽¯)〜)の別の例として、

製品の機能

var mult = function(){
  console.log( '开始计算乘积' );
  var a = 1;
  for ( var i = 0, l = arguments.length; i < l; i++ ){
    a = a * arguments[i];
  }
  return a;
};

キャッシングプロキシ機能

var proxyMult = (function(){
  // 缓存结果
  var cache = {};
  return function(){
    // 将参数转化为字符串
    var args = Array.prototype.join.call( arguments, ',' );
    // 遍历缓存结果如果存在直接返回结果
    if ( args in cache ){
      return cache[ args ];
    }
    // 不存在进行计算并保存结果
    return cache[ args ] = mult.apply( this, arguments );
  }
})();

proxyMult( 1, 2, 3, 4 ); // 输出:24 
proxyMult( 1, 2, 3, 4 ); // 输出:24

また、動的プロキシを作成することができます

/**************** 计算乘积 *****************/
var mult = function(){
  var a = 1;
  for ( var i = 0, l = arguments.length; i < l; i++ ){
    a = a * arguments[i];
  }
  return a;
}
/**************** 计算加和 *****************/
var plus = function(){
  var a = 0;
  for ( var i = 0, l = arguments.length; i < l; i++ ){
    a = a + arguments[i];
  }
  return a;
}
/**************** 创建缓存代理的工厂 *****************/
var createProxyFactory = function( fn ){
  // 缓存结果
  var cache = {};
  return function(){
    // 将参数转换成字符串
    var args = Array.prototype.join.call( arguments, ',' );
    // 遍历缓存结果如果存在直接返回结果
    if ( args in cache ){
      return cache[ args ];
    }
    // 不存在进行相应的计算并保存结果
    return cache[ args ] = fn.apply( this, arguments );
  }
};

// 创建乘法和加法
var proxyMult = createProxyFactory( mult ),proxyPlus = createProxyFactory( plus )

alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出:10 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出:10

プロキシモードでは、JavaScriptで開発された小分類の数は、最も一般的に使用される仮想プロキシとキャッシュプロキシで含まれています。代理店モデルは非常に便利ですが、我々はビジネスのコードを書くときにプロキシモードを使用する必要があるかどうか、多くの場合、事前に推測する必要はありませんが。本当の発見が遅すぎるときのエージェントを再書き込みオブジェクトへの便利な直接のアクセスがない場合。

現在の理解のための代理店モデルはそんなに後で更新していきます新たな理解を持っている、と滑っが滑っ(〜¯▽¯)〜

おすすめ

転載: www.cnblogs.com/loveyt/p/11410593.html