Explication détaillée du mode proxy JavaScript, des scénarios d'utilisation du mode apparence et du code d'implémentation

Mode agent

La signification chinoise du mode proxy est d'aider les autres à faire des choses. L'explication JavaScript est la suivante : transférer l'accès à un objet à un autre objet proxy pour l'opération.

Mise en œuvre du code :

// 补打卡事件
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, 补打卡状态：补打卡成功

Scénario d'application :

Par exemple, pour le chargement paresseux des images, nous pouvons utiliser cette technologie. Avant que l'image ne soit chargée, donnez une image de chargement, puis remplacez-la par le chemin physique une fois le chargement terminé.

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"); // 真实要展示的图片

Bien sûr, cette méthode de chargement paresseux peut également être implémentée sans mode proxy, utilisez simplement le mode proxy. Nous pouvons laisser myImage faire une seule chose, qui est uniquement responsable de l'ajout de l'image réelle à la page, et laisser le chargement de l'image à ProxyImage. Cela réduit le couplage du code. Parce que lorsque je ne veux pas utiliser le chargement, je peux appeler directement la méthode myImage. C’est-à-dire que si nous n’avons pas besoin d’un objet proxy, nous pouvons appeler directement cette méthode à la place de l’objet d’origine.

Mode apparence

Le mode apparence est très courant. Essentiellement, cela simplifie l'accès à une ou plusieurs fonctions plus grandes, éventuellement plus complexes, en écrivant une seule fonction. En d’autres termes, le mode apparence peut être considéré comme un moyen de simplifier certains contenus.

Pour parler franchement, le mode apparence est une fonction qui encapsule des opérations complexes.

Implémentation du code :

Par exemple, un appel ajax multi-navigateurs

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);
})

Scénario d'application :

Lorsqu'une série d'appels de fonctions ou de méthodes doivent être accessibles via une seule fonction ou méthode pour simplifier le reste de la base de code et rendre le code plus facile pour suivre le mode Apparence peut être utilisé pour la gestion ou une meilleure maintenance. En fait, ce mode devrait être utilisé plus souvent dans notre code quotidien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!