자바스크립트 프록시 모드

이번에는 Javascript의 프록시 모드를 가져오며, 자바스크립트 프록시 모드의 주의사항은 무엇인지 살펴보겠습니다.

프록시 패턴 정의: 다른 개체에 대한 프록시를 제공하여 이 개체에 대한 액세스를 제어합니다. 어떤 경우에는 한 개체가 적합하지 않거나 다른 개체를 직접 참조할 수 없으며 프록시 개체가 클라이언트와 대상 개체 사이의 중개자 역할을 할 수 있습니다.

가상 프록시는 실제로 필요할 때까지 값비싼 객체의 생성 및 실행을 지연시킵니다.

이미지의 지연 로딩

//图片加载let imageEle = (function(){    let node = document.createElement('img');    document.body.appendChild(node);    return {        setSrc:function(src){
            node.src = src;
        }
    }
})();//代理对象let proxy = (function(){    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };    return {        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();
proxy.setSrc('example.png');

http 요청 병합

오버헤드와 같이 빈번한 요청 작업이 필요한 기능이 있는 경우 상대적으로 큰 프록시 기능을 통해 일정 기간 동안 요청 데이터를 수집하고 한 번에 보낼 수 있습니다.

//上传请求let upload = function(ids){
    $.ajax({        data: {            id:ids
        }
    })
}//代理合并请求let proxy = (function(){    let cache = [],
        timer = null;    return function(id){
        cache[cache.length] = id;        if(timer) return false;
        timer = setTimeout(function(){
            upload(cache.join(','));
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000);
    }  
})(); 
// 绑定点击事件let checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++];){
    c.onclick = function(){        if(this.checked === true){
            proxy(this.id);
        }
    }
}

캐시 ​​프록시

캐시 프록시는 다음 계산 중에 매개변수가 As로 전달되면 값비싼 계산 결과에 대한 임시 저장소를 제공할 수 있습니다. 이전에는 이전에 저장된 작업 결과를 직접 반환할 수 있습니다

//计算乘积let mult = function(){    let result = 1;    for(let i = 0,len = arguments.length;i < len;i++){
        result*= arguments[i];
    }    return result;
}//缓存代理let proxy = (function(){    let cache = {};
    reutrn function(){        let args = Array.prototype.join.call(arguments,&#39;,&#39;);        if(args in cache){            return cache[args];
        }        return cache[args] = mult.apply(this,arguments);
    }
})();

장점과 단점

장점: 프록시 모드는 호출된 개체에서 프록시 개체를 분리할 수 있어 시스템의 결합을 줄일 수 있습니다. 프록시 모드는 클라이언트와 대상 객체 간의 중개 역할을 수행하여 대상 객체를 보호할 수 있습니다. 프록시 개체는 대상 개체를 호출하기 전에 다른 작업을 수행할 수도 있습니다.

단점: 시스템의 복잡성이 증가합니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Javascript의 전략 패턴

JS에서 기능 제한 사용

위 내용은 자바스크립트 프록시 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!