제6장 프록시 모드

8721 단어

제6장 프록시 모드


6.1 첫 번째 예--샤오밍이 MM을 쫓는 이야기

var Flower = function () {};

var xiaoming = {
    sendFlower : function(target){
        var flower = new Flower();
        target.receiveFlower(flower);
    }
}

var A = {
    receiveFlower:function(flower){
        console.log(' '+flower);
    }
}

xiaoming.sendFlower(A);

프록시 B 도입
var Flower = function () {};

var xiaoming = {
    sendFlower : function(target){
        var flower = new Flower();
        target.receiveFlower(flower);
    }
}

var B = {
    receiveFlower:function(flower){
        A.receiveFlower(flower)
    }
}
var A = {
    receiveFlower:function(flower){
        console.log(' '+flower);
    }
}

xiaoming.sendFlower(B);

B는 A의 심경 변화를 감청합니다.
var Flower = function () {};

var xiaoming = {
    sendFlower : function(target){
        var flower = new Flower();
        target.receiveFlower(flower);
    }
}

var B = {
    receiveFlower:function(flower){
        A.listenGoodMood(function(){
            A.receiveFlower(flower)
        });
    }
}
var A = {
    receiveFlower:function(flower){
        console.log(' '+flower);
    },
    listenGoodMood:function(fn){
        setTimeout(function(){
            fn();
        },3000);

    }
}

xiaoming.sendFlower(B);

6.2 보호 에이전트 및 가상 에이전트


예를 들어 꽃을 보내는 사람 중 나이가 너무 많거나 보마가 없으면 대리 B에서 거절당할 수 있다. 이런 대리를 보호대리라고 한다.
하얀 얼굴 A는 계속해서 좋은 여신 이미지를 유지하고 누구도 거절하기를 원하지 않아 검은 얼굴 B를 찾아 A에 대한 방문을 통제했다
에이전트 B는 A가 기분이 좋을 때 new Flower를 실행합니다. 이를 가상 에이전트라고 합니다. 이것은 비용이 많이 드는 대상을 진정으로 필요로 할 때까지 늦추어 만듭니다.
var B = {
    receiveFlower:function(){
        A.listenGoodMood(function(){
            var flower = new flower();
            A.receiveFlower(flower);
        });
    }
}

Javascript에서는 보호 에이전트를 실현하기가 쉽지 않습니다. 누가 어떤 대상에 접근했는지 판단할 수 없기 때문입니다.가상 에이전트는 가장 자주 사용하는 에이전트 모델로 본 장에서 주로 논의하는 것도 가상 에이전트이다.

6.3 가상 에이전트가 이미지 사전 로드를 실현

var myImage = (function(){
    // body...
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

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

var proxyImage = (function(){
    var img = new Image;
    img.load = function(){
        myImage.setSrc(this.src);
    }
    return {
        setSrc:function(src){
            myImage.setSrc('file://jdjisj.gif');
            img.src = src;
        }
    }

})()

myImage.setSrc('http:wwjjfjds.jpg');

6.4 에이전트의 의미


프록시 없이 미리 불러오는 그림 함수 구현
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(){
            imgNode.src = 'file://dsd.gif';
            img.src = src;
        }
    }
})()

MyImage.setSrc('http://dsadsd.jpg');

객체에 대한 설계 원칙 – 단일 책임 원칙
대상을 대상으로 하는 디자인은 행위를 세립도의 대상에 분포하는 것을 장려한다. 만약에 한 대상이 맡은 직책이 너무 많으면 이런 직책을 한데 결합시키는 것과 같다. 이 중의 결합은 취약하고 낮은 내적 집합을 초래할 수 있다.변화가 발생할 때, 설계는 의외의 파환을 당할 수 있다.
대상 대상 프로그램에서 대부분의 경우 다른 어떤 원칙을 위반하면 개방-폐쇄 원칙을 위반한다.이 때 미리 불러오는 코드를 삭제하면 My Image 대상을 움직여야 합니다.
에이전트는 그림을 미리 불러온 후 요청을 본체에 다시 전달합니다.
미리 불러올 필요 없어요. 요청 프록시 대상이 아닌 요청 본체로 바꾸면 돼요.

6.5 에이전트와 본체 인터페이스의 일치성


에이전트 대상과 본체는 모두 대외적으로 setSrc 방법을 제공했다. 고객이 보기에 에이전트 대상과 본체는 일치하고 에이전트가 요청을 인수하는 과정은 사용자에게 투명하며 사용자는 에이전트와 본체의 차이를 잘 모른다.
  • 사용자는 안심하고 에이전트를 요청할 수 있으며, 그는 원하는 결과를 얻을 수 있는지에만 관심을 갖는다
  • 본체를 사용하는 곳에서는 사용 에이전트로 바꿀 수 있다

    • Javascript라는 언어에서 우리는 때때로 오리 유형을 통해 에이전트와 본체가 setSrc 방법을 실현했는지 검사한다. 또한 대다수는 심지어 검사를 하지 않고 모두 프로그래머의 자각성에 의존한다
    인터페이스 없는 세상
    만약 프록시 대상과 본체 대상이 모두 하나의 함수(함수도 대상)이면 함수는 반드시 실행될 수 있으며, 그것들도 일치하는'인터페이스'를 가지고 있다고 생각할 수 있다
    var myImage = (function(){
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

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

var proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
        myImage(this.src);
    }

    return function(src){
        myImage('file:fsfdf.gif');
        img.src = src;
    }
})();

proxyImage('http://sds.jpg');

    6.6 가상 에이전트 통합 HTTP 요청
    


    
    Document


1
2
3
4
5
6
7
8
9


    var synchronousFile = function(id){
        console.log(' ,id ：'+'id');
    }
    var checkbox = document.getElementsByTagName('input');
    for(var i = 0,c; c = checkbox[i++];){
        c.onclick = function(){
            if (this.checked === true) {
                synchronousFile(this.id);
            }
        }
    }

    이렇게 빈번한 네트워크 요청은 상당한 비용을 가져올 것이다
    var synchronousFile = function(id){
    console.log(' ，id :' + id);
}

var proxySynchronousFile = (function(){
    var cache = [],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 checkbox = document.getElementsByTagName('input');
for(var i = 0,c;c = checkbox[i++]){
    c.onclick = function(){
        if (this.checked ===true) {
            proxySynchronousFile(this.id);
        }
    }
}

    6.7 가상 에이전트가 불활성 로드에서의 응용

    var miniConsole = (function(){
    var cache = [];
    var handler = function(ev){
        if(ev.keyCode === 113){
            var script = document.createElement('script');
            script.onload = function(){
                for(var i = 0, fn;fn = cache[i++];){
                    fn();
                }
            }
            script.src = 'miniConsole.js';
            document.getElementsByTagName('head')[0].appendChild(script);
            document.body.removeEventListener('keydown',handler);// miniConsole.js
        }
    };
    document.body.addEventListener('keydown',handler,false);
    return {
        log:function(){
            var args = arguments;
            cache.push(function(){
                return miniConsole.log.apply(miniConsole,args);
            });
        }
    }
})();

miniConsole.log(11);

//miniConsole.js 
miniConsole = {
    log:function(){
        // 
        console.log(Array.prototype.join.call(arguments));
    }
}

    6.8 캐시 에이전트


    6.8.1 캐시 에이전트의 예 - 곱셈 계산

    var mult = function(){
    console.log(' ');
    var a = 1;
    for(var i=0, l = arguments.length;i

    6.8.2 캐시 에이전트는 aax 비동기 요청 데이터에 사용


    이미 가져온 데이터가 어딘가에 캐시된 후에 다음에 같은 페이지를 요청할 때 이전의 데이터를 직접 사용할 수 있습니다.
    여기에도 캐시 에이전트를 도입할 수 있다. 실현 방식은 계산 곱셈의 예와 차이가 많지 않다. 유일하게 다른 것은 요청은 비동기적인 조작이다. 우리는 계산 결과를 에이전트 대상의 캐시에 넣을 수 없고 리셋을 통해
    6.9 고급 함수로 동적 에이전트 만들기
    var mult = function(){
    var a = 1;
    for(var i = 0,l = arguments.length;i

    6.10 기타 프록시 모드


    방화벽 모드: 네트워크 자원의 접근을 제어하고 테마가'나쁜 사람'이 원격 에이전트에 접근하지 못하게 보호합니다. 한 대상이 서로 다른 주소 공간에 국부적인 대표를 제공하고 JAVA에서 원격 에이전트는 다른 가상 기기의 대상 보호 에이전트일 수 있습니다. 대상이 서로 다른 접근 권한을 가져야 하는 경우에 사용됩니다.스마트 인용 횟수: 간단한 지침을 대체하여 대상에 접근할 때 추가 작업을 수행합니다. 예를 들어 대상이 인용된 횟수를 계산합니다.쓰기 시 복제 에이전트: 일반적으로 방대한 대상을 복제하는 데 사용됩니다.쓰기 시 복사 에이전트는 복사 과정을 지연시키고 대상이 진정으로 수정될 때 복사 작업을 합니다.쓰기 시 복제 에이전트는 가상 에이전트의 변체로 DLL(운영 체제의 동적 링크 라이브러리)은 전형적인 운용 장면이다
    Atitit.js의 키보드 키 이벤트 묶음 and 이벤트 스케줄링
    JS 모듈식 샘플

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage