Node.js 디자인 패턴: 프록시 패턴이 무엇인가요? JS 프록시 모드 소개-JS 튜토리얼-php.cn

Node.js 디자인 패턴: 프록시 패턴이 무엇인가요? JS 프록시 모드 소개

不言

풀어 주다： 2018-08-17 16:09:14

원래의

1860명이 탐색했습니다.

이 기사에서는 js 디자인 패턴에 대한 내용을 제공합니다. 프록시 패턴이란 무엇입니까? js 프록시 모드의 도입은 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프록시 모드란 무엇인가요?

시나리오: Xiao Ming이 여자 A를 쫓습니다

비 에이전트 모드: Xiao Ming=화=> 여자 A
에이전트 모드: Xiao Ming=Hua=> 여자 A의 친구 B help=Hua= > 소녀 A

정의: 이 개체에 대한 액세스를 제어하려면 다른 개체에 대한 프록시를 제공하세요.

주요 해결 방법: 객체에 직접 액세스할 때 발생하는 문제(예: 액세스할 객체가 원격 시스템에 있음). 객체 지향 시스템에서 일부 객체에 직접 접근하면 특정 이유로 인해 사용자나 시스템 구조에 많은 문제가 발생합니다(예: 객체 생성 비용이 많이 들거나 특정 작업에 보안 제어가 필요하거나 프로세스 외부가 필요함). access) 이 개체에 액세스할 때 이 개체에 액세스 레이어를 추가할 수 있습니다.

사용 시기: 개체에 액세스할 때 어느 정도 제어권을 갖고 싶습니다.

해결 방법: 중간 레이어를 추가하세요.

응용 사례: 1. Windows의 바로가기. 2. Zhu Bajie가 Gao Cuilan을 찾으러 갔을 때 그는 Sun Wukong으로 밝혀졌습니다. Gao Cuilan의 모습은 추상화되었으며 Zhu Bajie가 Gao Cuilan을 방문했을 때 Sun Wukong은 이 인터페이스를 구현했습니다. 그는 이것이 Sun Wukong이라고 말할 수 없었기 때문에 Sun Wukong은 Gao Cuilan 요원 클래스라고 말했습니다. 3. 기차표를 기차역에서 살 필요 없이 대리점에 가셔도 됩니다. 4. 수표 또는 은행 예금 증명서는 계좌 자금의 대리인입니다. 수표는 시장 거래에서 현금 대신 사용되며 발행자의 계좌에 보관된 자금을 통제할 수 있습니다. 5. 스프링 AOP.

장점: 1. 명확한 책임. 2. 높은 확장성. 3. 지능적.

단점: 1. 클라이언트와 실제 주체 사이에 프록시 개체가 추가되어 일부 유형의 프록시 모드에서는 요청 처리 속도가 느려질 수 있습니다. 2. 프록시 모드를 구현하려면 추가 작업이 필요하며 일부 프록시 모드의 구현은 매우 복잡합니다.

사용 시나리오: 책임에 따라 분류되며 일반적으로 다음과 같은 사용 시나리오가 있습니다. 1. 원격 에이전트. 2. 가상 에이전트. 3. 기록 중 복사 에이전트. 4. 에이전트를 보호(보호 또는 액세스)합니다. 5. 캐시 에이전트. 6. 방화벽 프록시. 7. 동기화 에이전트. 8. 스마트 참조 에이전트.

참고: 1. 어댑터 패턴과의 차이점: 어댑터 패턴은 주로 고려 중인 객체의 인터페이스를 변경하는 반면, 프록시 패턴은 프록시 클래스의 인터페이스를 변경할 수 없습니다. 2. 데코레이터 모드와 데코레이터 모드의 차이점: 데코레이터 모드는 기능을 향상시키는 것이고 프록시 모드는 기능을 제어하는 것입니다.

프록시 모드에는 다양한 유형이 있으며, JS에서 가장 일반적으로 사용되는 것은 가상 프록시와 캐싱 프록시입니다.

가상 프록시는 이미지 사전 로드를 구현합니다.

다음 코드는 프록시 모드를 사용하여 이미지 사전 로드를 구현합니다. 프록시 모드가 나중에 사전 로드가 필요하지 않은 경우 이미지 생성을 교묘하게 분리하는 것을 볼 수 있습니다. 요청 프록시 객체 대신 요청 온톨로지.

const myImage = (function() {
  const imgNode = document.createElement(&#39;img&#39;)
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc(&#39;loading.jpg&#39;) // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc(&#39;http://loaded.jpg&#39;)

로그인 후 복사

캐시 프록시는 제품 계산을 구현합니다

const mult = function() {
  let a = 1
  for (let i = 0, l; l = arguments[i++];) {
    a = a * l
  }
  return a
}

const proxyMult = (function() {
  const cache = {}
  return function() {
    const tag = Array.prototype.join.call(arguments, &#39;,&#39;)
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()

proxyMult(1, 2, 3, 4) // 24

로그인 후 복사

추천: 개발 중에 프록시 모드를 사용해야 하는지 추측하지 마세요. 객체를 직접 사용하는 것이 불편하다고 생각되면 최적화해도 늦지 않습니다.