JavaScript プロキシ モード、アピアランス モードの使用シナリオ、実装コードの詳細な説明

エージェント モード

プロキシ モードの中国語の意味は、他の人のために何かを行うことです。JavaScript の説明では、オブジェクトへのアクセスを別のプロキシ オブジェクトに引き渡して操作します。

// 补打卡事件
var fillOut = function (lateDate) {
  this.lateDate = lateDate;
};
// 这是bigBoss
var bigBoss = function (fillOut) {
  this.state = function (isSuccess) {
    console.log("忘记打卡的日期为：" + fillOut.lateDate + ", 补打卡状态：" + isSuccess);
  }
};
// 助理代理大boss 完成补打卡审批
var proxyAssis = function (fillOut) {
  this.state = function (isSuccess) {
    (new bigBoss(fillOut)).state(isSuccess); // 替bigBoss审批
  }
};
// 调用方法：
var proxyAssis = new proxyAssis(new fillOut("2016-9-11"));
proxyAssis.state("补打卡成功");
// 忘记打卡的日期为：2016-9-11, 补打卡状态：补打卡成功

アプリケーションシナリオ:

たとえば、画像の遅延読み込みには、このテクノロジーを使用できます。イメージをロードする前にロードイメージを指定し、ロードが完了した後にそれを物理パスに置き換えます。

var myImage = (function(){
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  return function(src){
    imgNode.src = src; 
  }
})();
// 代理模式
var ProxyImage = (function(){
  var img = new Image();
  img.onload = function(){
    myImage(this.src);
  };
  return function(src) {
        // 占位图片loading
        myImage("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
    img.src = src;
  }
})();
// 调用方式
ProxyImage("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png"); // 真实要展示的图片

もちろん、この遅延読み込み方法は、プロキシ モードを使用せずに、プロキシ モードのみを使用して実装することもできます。 myImage に実行させることは 1 つだけで、実際の画像をページに追加することだけを担当し、画像の読み込みは ProxyImage に任せることができます。これにより、コードの結合が減少します。ロードを使用したくない場合は、myImage メソッドを直接呼び出すことができるためです。つまり、プロキシ オブジェクトが必要ない場合は、元のオブジェクトでこのメソッドを直接呼び出すことができます。

外観モード

外観モードは非常に一般的です。基本的に、単一の関数を記述することで、1 つ以上のより大きく、場合によってはより複雑な関数へのアクセスが簡素化されます。言い換えれば、アピアランスモードは、特定のコンテンツを簡略化する手段とみなすことができます。 端的に言うと、アピアランスモードは複雑な操作をカプセル化する機能です。

コード実装:

たとえば、クロスブラウザーの Ajax 呼び出し

function ajaxCall(type,url,callback,data){
  // 根据当前浏览器获取对ajax连接对象的引用
  var xhr=(function(){
    try {
      // 所有现代浏览器所使用的标准方法
      return new XMLHttpRequest();
    }catch(e){}
    // 较老版本的internet Explorer兼容
    try{
      return new ActiveXObject("Msxml2.XMLHTTP.6.0");
    }catch(e){}
    try{
      return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }catch(e){}
    try{
      return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){}
    // 如果没能找到相关的ajax连接对象，则跑出一个错误。
    throw new Error("Ajax not support in this browser.")
  }()),
  STATE_LOADED=4,
  STATUS_OK=200;
  // 一但从服务器收到表示成功的相应消息，则执行所给定的回调方法
  xhr.onreadystatechange=function{
    if(xhr.readyState !==STATE_LOADED){
      return;
    }
    if(xhr.state==STATUS_OK){
      callback(xhr.responseText);
    }
  }
  // 使用浏览器的ajax连接对象来向所给定的URL发出相关的调用
  xhr.open(type.toUpperCase(),url);
  xhr.send(data);
}
// 使用方法
ajaxCall("get","/user/12345",function(rs){
  alert('收到的数据为：'+rs);
})

アプリケーションシナリオ:

一連の関数またはメソッド呼び出しに単一の関数またはメソッドを通じてアクセスする必要がある場合メソッド ファサード モードを使用すると、コード ベースの残りの部分を簡素化し、コードの追跡や保守を容易にすることができます。実際、このモードは日常のコードでより頻繁に使用する必要があります。

以上がJavaScript プロキシ モード、アピアランス モードの使用シナリオ、実装コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。