JavaScript 디자인 패턴 배우기 - 프록시 패턴_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 디자인 패턴 배우기 - 프록시 패턴_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

javascript프록시 모드디자인 패턴

연예인은 매니저로 대표됩니다. 연예인에게 광고 공연을 요청하는 경우 해당 에이전트에게만 연락할 수 있습니다. 에이전트는 광고 공연의 세부 사항과 보수를 협상한 후 계약서를 유명인에게 전달하여 서명하게 됩니다.

1. 정의

프록시 패턴: 객체에 대한 액세스를 제어하기 위해 객체에 대한 대리자 또는 자리 표시자를 제공합니다.
에이전트는 보호 에이전트와 가상 에이전트
로 구분됩니다. 보호 에이전트: 는 대상 개체에 대해 서로 다른 권한을 가진 개체의 접근을 제어하는 데 사용됩니다. JavaScript에서는 개체에 누가 접근했는지 판단하기 어렵기 때문에 보호 에이전트가 어렵습니다. 구현합니다.

2. 이미지 사전 로딩(가장 일반적인 가상 에이전트 적용 시나리오)

이미지 미리 로드는 img 태그 노드에 대한 src 속성을 직접 설정하는 경우 이미지가 너무 크거나 네트워크 상태가 좋지 않아 이미지 위치가 한동안 비어 있는 경우가 많습니다. 일반적인 접근 방식은 미리 로딩 이미지를 자리 표시자로 사용한 다음, 이미지가 로드된 후 이미지를 img 노드에 채우는 것입니다.
구현 원칙:
이미지 객체 생성: var a = new Image()
이미지 객체의 src를 정의합니다: a.src = “xxx.gif”
이는 브라우저용 이미지를 캐싱하는 것과 같습니다.

이미지 객체의 완전한 속성을 통해 이미지 로딩 여부를 확인할 수 있습니다. 각 이미지 객체에는 완전한 속성이 있습니다. 이미지가 로드되는 동안 속성 값은 onload, onerror 및 onabort 이벤트가 발생하면 이미지 로드 프로세스가 끝났음을 의미합니다. 완전한 속성은 true입니다.

(1) 비 프록시 구현

var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  var img = new Image();

  img.onload = function() {
    imgNode.src = img.src;
  };

  return {
    setSrc: function(src) {
      imgNode.src = "./images/loading.gif";
      img.src = src;
    }
  }
})();

myImage.setSrc("./images/originImg.png");

(2) 프록시 구현

// 创建图片DOM
var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);

  return {
    setSrc: function(src) {
      imgNode.src = src;
    }
  };
})();

// 代理
var proxyImage = (function() {
  var img = new Image();

  img.onload = function() {
    myImage.setSrc(this.src);  // this指向img！img加载完成后，将img.src传递给myImage
  };

  return {
    setSrc: function(src) {
      myImage.setSrc("./images/loading.gif");   // loading
      img.src = src;
    }
  };
})();

proxyImage.setSrc("./images/originImg.png");

프록시 모드 사용의 이점: 각 기능을 단일 기능으로 만들고 객체 디자인의 "단일 책임 원칙"을 실현합니다!

3. 파일 동기화

파일 동기화 기능을 수행 중이라고 가정해 보겠습니다. 확인란을 선택하면 해당 파일이 다른 서버로 동기화됩니다.

<body>
    <input type="checkbox" id="1" />文件1
    <input type="checkbox" id="2" />文件2
    <input type="checkbox" id="3" />文件3
    <input type="checkbox" id="4" />文件4
    <input type="checkbox" id="5" />文件5
    <input type="checkbox" id="6" />文件6
  </body>

체크박스를 선택하지 않고 한 번 동기화하는 것은 당연히 무리입니다. 웹 개발에서 가장 큰 오버헤드는 네트워크 요청이기 때문입니다.
해결책: 프록시 기능을 사용하여 일정 시간 내에 요청을 수집한 후 한꺼번에 서버에 보냅니다.

var synchronousFile = function(id) {
  console.log("开始同步文件，id为：" + id);
};

var proxySynchonousFile = (function() {
  var cache = [],   // 保存本次需要同步文件的id
    timer;     // 定时器

  return function(id) {
    cache.push(id);
    if(timer) { 
      // 不要覆盖已经启动的定时
      return;
    }

    timer = setTimeout(function(){
      synchronousFile(cache.join(","));
      clearTimeout(timer);
      timer = null;
      cache.length = 0;  // 清空缓存
    }, 2000);
  }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
  c.onclick = function() {
    if(this.checked === true) {
      proxySynchonousFile(this.id);
    }
  }
}

4. 캐싱 프록시 - 곱 계산(순서는 정확히 동일함)

var mult = function() {
  var result = 1;
  for(var i = 0, l = arguments.length; i < l; i++) {
    result= result * arguments[i];
  }
  return result;
};

var proxyMult = (function() {
  var cache = {};   // {"1,2,3": 6}
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = mult.apply(this, arguments);
  }
})();

console.log(proxyMult(1, 2, 3));

// 改造：

var proxyFactory = function(fn) {
  var cache = {};
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = fn.apply(this, arguments);
  }  
};

console.log(proxyFactory(mult)(1, 2, 3));

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.