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가 페이지에 실제 이미지를 추가하는 일만 담당하고 로딩 이미지는 ProxyImage에 남겨두는 한 가지 작업만 수행하도록 할 수 있습니다. 이렇게 하면 코드의 결합이 줄어듭니다. 로딩을 사용하고 싶지 않을 때는 myImage 메서드를 직접 호출할 수 있기 때문입니다. 즉, 프록시 객체가 필요하지 않은 경우 원본 객체에서 이 메서드를 직접 호출할 수 있습니다.

외관 모드

외관 모드는 매우 일반적입니다. 기본적으로 단일 함수를 작성하여 하나 이상의 더 크고 더 복잡한 함수에 대한 액세스를 단순화합니다. 즉, 등장모드는 특정 내용을 단순화하는 수단으로 볼 수 있다.

직접 말하면 등장 모드는 복잡한 작업을 캡슐화하는 기능입니다.

코드 구현:

예: 브라우저 간 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!