2016년 2월 21일 일요일

자바스크립트 프록시 패턴(proxy pattern )

UML
[client] ---> [subject](interface) ← [proxy]
                        ↑
                 [real subject]


장점 : 사용자로부터 최적화와 관련내용을 감추어 코드를 단순하게 해준다.
단점 : 실제 객체가 생성되어 있다면, 오버헤드가 됨


proxy(대리자) : real subject로의 참조를 관리하고 접근을 제어한다. real subject가 구현하고 있는 인터페이스를 구현하므로 real subject를 사용하는 것처럼 사용할 수 있다.
subject : proxy와 real subject가 구현하고 있는 인터페이스, 이 인터페이스를 통해 이들이 상호 교환적으로 사용될 수 있다.
real subject : proxy가 대리하고 있는 실제 객체


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>proxy</title>
 </head>
 <body>
<script>

 var urls = [];
 var image = function(){
  return new proxyimage;
 }; //subject
 var realimage = function(){
  this.getimg = function(){
   console.log(urls);
  };
 }; //
 var proxyimage = function(){
  this.getimg = function(url){
   if (urls.indexOf(url) == -1){ // real subject 로드 여부 판단
    urls.push(url);
   }else{
    return (new realimage).getimg();
   }
  };
 }; //

 var client = new image;
  client.getimg('imgurl return'); //proxy 로드 전 
  client.getimg('imgurl return'); //proxy 로드 후 real subject 로드 
</script>
 </body>
</html>







댓글 없음:

댓글 쓰기