Detaillierte Erläuterung des JavaScript-Proxy-Modus, der Verwendungsszenarien für den Darstellungsmodus und des Implementierungscodes

Agent-Modus

Die chinesische Bedeutung des Proxy-Modus besteht darin, anderen bei der Ausführung von Aufgaben zu helfen. Die JavaScript-Erklärung lautet: Übergabe des Zugriffs auf ein Objekt an ein anderes Proxy-Objekt zur Bedienung.

Code-Implementierung:

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

Anwendungsszenario:

Zum Beispiel für das Lazy Loading von Bildern können wir diese Technologie nutzen. Geben Sie vor dem Laden des Bildes ein Ladebild an und ersetzen Sie es nach Abschluss des Ladevorgangs durch den physischen Pfad.

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

Natürlich kann diese Lazy-Loading-Methode auch ohne Proxy-Modus implementiert werden, nutzen Sie einfach den Proxy-Modus. Wir können myImage nur eines tun lassen, nämlich nur für das Hinzufügen des eigentlichen Bildes zur Seite verantwortlich sein und das Laden des Bildes ProxyImage überlassen. Dies reduziert die Kopplung des Codes. Denn wenn ich das Laden nicht verwenden möchte, kann ich die myImage-Methode direkt aufrufen. Das heißt, wenn wir kein Proxy-Objekt benötigen, können wir diese Methode direkt für das Originalobjekt aufrufen.

Darstellungsmodus

Darstellungsmodus ist sehr verbreitet. Im Wesentlichen vereinfacht es den Zugriff auf eine oder mehrere größere, möglicherweise komplexere Funktionen durch das Schreiben einer einzelnen Funktion. Mit anderen Worten: Der Darstellungsmodus kann als Mittel zur Vereinfachung bestimmter Inhalte angesehen werden.

Um es ganz klar auszudrücken: Der Darstellungsmodus ist eine Funktion, die komplexe Vorgänge kapselt.

Code-Implementierung:

Zum Beispiel ein browserübergreifender Ajax-Aufruf

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

Anwendungsszenario:

Wenn über eine einzelne Funktion oder Methode auf eine Reihe von Funktions- oder Methodenaufrufen zugegriffen werden muss, um den Rest der Codebasis zu vereinfachen und den Code einfacher zu machen Zur Nachverfolgung kann der Darstellungsmodus zur Verwaltung oder besseren Wartung verwendet werden. Tatsächlich sollte dieser Modus in unserem täglichen Code häufiger verwendet werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Proxy-Modus, der Verwendungsszenarien für den Darstellungsmodus und des Implementierungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!