Detailed explanation of JavaScript proxy mode, appearance mode usage scenarios and implementation code

Agent Mode

The Chinese meaning of the proxy mode is to help others do things. The JavaScript explanation is: hand over access to an object to another proxy object for operation.

Code implementation:

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

Application scenario:

For example, we can use this technology for lazy loading of images. Before the image is loaded, give a loading image, and then replace it with the physical path after the loading is completed.

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

Of course, this lazy loading method can also be implemented without proxy mode, just using proxy mode. We can let myImage do only one thing, which is only responsible for adding the actual image to the page, and leave the loading image to ProxyImage. This reduces the coupling of the code. Because when I don't want to use loading, I can call the myImage method directly. That is to say, if we do not need a proxy object, we can directly call this method on the original object.

Appearance mode

Appearance mode is very common. Essentially, it simplifies access to one or more larger, possibly more complex functions by writing a single function. In other words, appearance mode can be regarded as a means of simplifying certain content.

To put it bluntly, appearance mode is a function that encapsulates complex operations.

Code implementation:

For example, a cross-browser ajax call

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

Application scenario:

When a series of function or method calls need to be accessed through a single function or method to simplify the rest of the code base, making the code easier to track and manage, or For better maintenance, you can use appearance mode. In fact, this mode should be used more often in our daily code.

The above is the detailed content of Detailed explanation of JavaScript proxy mode, appearance mode usage scenarios and implementation code. For more information, please follow other related articles on the PHP Chinese website!