JavaScript 디자인 패턴 배우기 - 프록시 패턴_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 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7625
15
1389
52
89
11
70
19
31
138
Java 프레임워크의 디자인 패턴과 아키텍처 패턴의 차이점
Jun 02, 2024 pm 12:59 PM
Java 프레임워크에서 디자인 패턴과 아키텍처 패턴의 차이점은 디자인 패턴이 클래스와 객체(예: 팩토리 패턴) 간의 상호 작용에 중점을 두고 소프트웨어 디자인의 일반적인 문제에 대한 추상적인 솔루션을 정의한다는 것입니다. 아키텍처 패턴은 계층화된 아키텍처와 같은 시스템 구성 요소의 구성 및 상호 작용에 중점을 두고 시스템 구조와 모듈 간의 관계를 정의합니다.
Java 디자인 패턴의 데코레이터 패턴 분석
May 09, 2024 pm 03:12 PM
데코레이터 패턴은 원래 클래스를 수정하지 않고도 객체 기능을 동적으로 추가할 수 있는 구조적 디자인 패턴입니다. 추상 컴포넌트, 콘크리트 컴포넌트, 추상 데코레이터, 콘크리트 데코레이터의 협업을 통해 구현되며, 변화하는 요구에 맞게 클래스 기능을 유연하게 확장할 수 있습니다. 이 예에서는 우유와 모카 데코레이터가 총 $2.29의 가격으로 Espresso에 추가되어 객체의 동작을 동적으로 수정하는 데코레이터 패턴의 힘을 보여줍니다.
PHP 디자인 패턴 실제 사례 분석
May 08, 2024 am 08:09 AM
1. 팩토리 패턴: 객체 생성과 비즈니스 로직을 분리하고, 팩토리 클래스를 통해 지정된 형태의 객체를 생성합니다. 2. 관찰자 패턴: 주체 개체가 관찰자 개체에 상태 변경을 알리도록 허용하여 느슨한 결합 및 관찰자 패턴을 달성합니다.
디자인 패턴이 코드 유지 관리 문제를 처리하는 방법
May 09, 2024 pm 12:45 PM
디자인 패턴은 재사용 및 확장 가능한 솔루션을 제공하여 코드 유지 관리 문제를 해결합니다. 관찰자 패턴: 개체가 이벤트를 구독하고 이벤트가 발생할 때 알림을 받을 수 있도록 합니다. 팩토리 패턴: 구체적인 클래스에 의존하지 않고 객체를 생성하는 중앙 집중식 방법을 제공합니다. 싱글톤 패턴: 클래스에 전역적으로 액세스 가능한 개체를 만드는 데 사용되는 인스턴스가 하나만 있는지 확인합니다.
Java 디자인 패턴에서 어댑터 패턴의 놀라운 사용
May 09, 2024 pm 12:54 PM
어댑터 패턴은 호환되지 않는 개체가 함께 작동할 수 있도록 하는 구조적 디자인 패턴입니다. 이는 개체가 원활하게 상호 작용할 수 있도록 하나의 인터페이스를 다른 인터페이스로 변환합니다. 개체 어댑터는 적응된 개체를 포함하는 어댑터 개체를 만들고 대상 인터페이스를 구현하여 어댑터 패턴을 구현합니다. 실제적인 경우 클라이언트(예: MediaPlayer)는 어댑터 모드를 통해 고급 형식 미디어(예: VLC)를 재생할 수 있지만 클라이언트 자체는 일반 미디어 형식(예: MP3)만 지원합니다.
PHP 디자인 패턴: 실제 테스트 중심 개발
Jun 03, 2024 pm 02:14 PM
TDD는 고품질 PHP 코드를 작성하는 데 사용됩니다. 단계에는 테스트 사례 작성, 예상 기능 설명 및 실패 만들기가 포함됩니다. 과도한 최적화나 세부 설계 없이 테스트 케이스만 통과하도록 코드를 작성합니다. 테스트 케이스를 통과한 후 코드를 최적화하고 리팩터링하여 가독성, 유지 관리성 및 확장성을 향상시킵니다.
Java 프레임워크에서 프록시 모드의 장점과 단점은 무엇입니까?
Jun 03, 2024 am 09:34 AM
프록시 패턴은 프록시 객체를 생성하여 클라이언트와 대상 객체 사이를 중재하는 Java 프레임워크 디자인 패턴입니다. 그 장점은 다음과 같습니다: 대상 개체 보호, 대상에 대한 액세스 제어, 권한 제어 및 보안 조치 구현, 로깅, 캐싱 및 트랜잭션 관리와 같은 추가 기능 추가, 모의 및 스텁 촉진 목표. 그러나 프록시 패턴에는 다음과 같은 단점도 있습니다. 오버헤드: 프록시 객체를 생성하고 유지하면 성능이 저하될 수 있습니다. 복잡성: 디자인 패턴에 대한 깊은 이해가 필요하며 일부 경우에는 적합하지 않을 수 있습니다.
Guice 프레임워크에 디자인 패턴 적용
Jun 02, 2024 pm 10:49 PM
Guice 프레임워크는 다음을 포함한 다양한 디자인 패턴을 적용합니다. 싱글톤 패턴: @Singleton 주석을 통해 클래스에 인스턴스가 하나만 있는지 확인합니다. 팩토리 메소드 패턴: @Provides 주석을 통해 팩토리 메소드를 생성하고 종속성 주입 중에 객체 인스턴스를 얻습니다. 전략 모드: 알고리즘을 다양한 전략 클래스로 캡슐화하고 @Named 주석을 통해 특정 전략을 지정합니다.
