집 > 기사 > 웹 프론트엔드 > JavaScript 디자인 패턴의 프록시 패턴 소개

JavaScript 디자인 패턴의 프록시 패턴 소개

不言원래의: 2018-07-03 14:24:211506검색

이 글에서는 자바스크립트 디자인 패턴 중 프록시 모드를 주로 소개하고, 프록시 모드의 개념, 기능, 구성을 간략하게 설명하고, 예제 형식과 자바스크립트 프록시 모드의 정의 및 사용법에 대한 보다 자세한 분석을 결합했습니다. 필수 프렌즈는

을 참고하여 JavaScript 디자인 패턴의 프록시 패턴을 예시로 설명합니다. 참고하실 수 있도록 모두와 공유해 주세요. 자세한 내용은 다음과 같습니다.

1. 에이전시 모델의 개념

Agency는 이름 그대로 다른 사람이 일을 할 수 있도록 돕는 것입니다. GoF는 에이전시 모델을 다음과 같이 정의합니다. #🎜🎜 #

프록시 모드(Proxy)는 이 객체에 대한 액세스를 제어하기 위해 다른 객체에 대한 프록시를 제공합니다. 프록시 패턴을 사용하면 프록시 개체가 특정 개체에 대한 참조를 제어할 수 있습니다. 프록시는 파일, 리소스, 메모리의 개체 또는 복사하기 어려운 개체 등 거의 모든 개체가 될 수 있습니다.

설명: 주택 중개인은 판매자가 구매자에게 집을 판매할 수 있도록 대리인 역할을 할 수 있습니다. 이 기간 동안 판매자는 원하는 가격을 설정할 수 있습니다. 집을 팔고, 구매자가 자신의 가격을 제안할 수도 있습니다. 구매하려는 주택 유형에 따라 중개인이 중간 단계를 처리하는 데 도움을 줄 수 있습니다. 마침내 거래가 성사됩니다. 중개인은 동시에 여러 주택 매매 및 임대에 대한 중개인 역할을 할 수 있습니다.

프록시 패턴의 구성:

추상 역할: 인터페이스 또는 추상 클래스를 통해 실제 역할을 선언하여 구현되는 비즈니스 메서드입니다.

에이전트 역할: 추상적인 역할을 구현하며 실제 역할의 에이전트입니다. 실제 역할의 비즈니스 로직 방법을 통해 추상적인 방법을 구현하고 자체 작업을 연결할 수 있습니다.

실제 역할: 추상 역할을 구현하고, 실제 역할이 구현할 비즈니스 로직을 정의하고, 에이전트 역할에 의해 호출됩니다.

2. 프록시 모드의 역할과 주의사항

모드 역할:

1. 원격 프록시(객체가 다른 공간의 객체를 현지화함) 프록시)

2. 가상 프록시(필요에 따라 웹 페이지 렌더링과 같이 값비싼 개체를 생성하고 임시로 실제 이미지를 대체하는 자리 표시자 사용)

3. 개체 액세스 권한)

4. 지능형 안내(가비지 수집 메커니즘 등 다른 작업을 처리하기 위해 개체 에이전트 호출)

참고:

1 . 프록시를 남용할 수 없으며 때로는 코드가 복잡해질 뿐입니다

3. 프록시 모드 코드 및 실제 요약

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>代理模式</title>
</head>
<body>
<script>
 //代理模式需要三方
 //1.买家
 function maijia(){
  this.name = "小明";
  this.money = "30万";
 }
 //2.中介
 function zhongjie(){
 }
 zhongjie.prototype.maifang = function(){
  //new fongdong(new maijia()).maifang("20万");
  new fongdong(new maijia()).maifang("20万");
 }
 //3.卖家
 function fongdong(maijia){
  this.maijia_name = maijia.name;
  this.maijia_money = maijia.money;
  this.maifang = function(money){
//   console.log("收到了来自【"+this.maijia_name+"】"+money+"人民币");
   console.log("收到了来自【"+this.maijia_name+"】"+this.maijia_money+"人民币");
  }
 }
 (new zhongjie()).maifang();
</script>
<script>
// A2B
 function A(){
  this.money = "20RMB";
 }
 function to(){
  if(!(this instanceof to)){
   return new to;
  }
 }
 to.prototype.maifang = function(){
  var a = new A();
  new B().maifang(a.money);
 }
 function B(){
  this.maifang = function(money){
   console.log("收到了钱"+money);
  }
 }
 (new to()).maifang();
 to().maifang();
</script>
</body>
</html>

#🎜 🎜#

작동 효과는 다음과 같습니다.

위 내용은 이 글의 전체 내용입니다. 여러분의 공부에 더 많은 관련 내용을 주목해주세요!

JavaScript 디자인 패턴의 프록시 패턴 소개

1. 에이전시 모델의 개념

관련 기사