집 >웹 프론트엔드 >JS 튜토리얼 >JS 디자인 패턴의 프록시 패턴에 대한 자세한 설명

JS 디자인 패턴의 프록시 패턴에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-14 14:20:272353검색

이번에는 프록시 모드 의 JS 디자인 패턴 에 대해 자세히 설명하겠습니다. JS 프록시 모드의 주의 사항 은 무엇입니까? 다음은 실제 사례입니다. 살펴 보겠습니다.

개념: 프록시 패턴은 개체에 대한 액세스를 제어하기 위해 개체에 대한 대체 또는 자리 표시자를 제공하는 것입니다. 즉, 현재 개체의 단일 책임을 보장하려면 현재 개체의 일부 논리를 처리하여 코드 효율성을 향상시키고 상태를 확인하는 등의 다른 개체를 만들어야 합니다. 프록시는 파일, 리소스 등 거의 모든 개체가 될 수 있습니다. , 메모리에 있는 개체 또는 복사하기 어려운 것들. 일반적인 에이전트에는 원격 에이전트, 가상 에이전트, 보안 에이전트 및 지능형 안내가 포함됩니다. 가장 일반적인 두 가지 에이전트 모드인 가상 에이전트를 주로 소개하겠습니다.

기능 및 주의사항
1. 원격 프록시(한 공간에서 다른 공간의 개체를 로컬로 프록시)
2. 가상 프록시(이미지 로딩 등 고가의 개체를 생성해야 함)
3. 보안 프록시(실제 개체 액세스 권한 제어)
4. 지능적인 지침(가비지 수집 메커니즘과 같은 다른 작업을 처리하기 위해 개체 프록시 호출)
참고:
프록시를 남용할 수 없습니다. 때로는 코드의 복잡성만 증가시킬 뿐입니다.

이미지 사전 로드를 구현하는 가상 에이전트를 살펴보겠습니다

// 图片加载函数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 );
    };    return {
        setSrc: function(src){
            // 图片未被载入时，加载一张提示图片
            myImage.setSrc("file://c:/loading.png");
            img.src = src;
        }
    }
})();// 调用代理对象加载图片proxyImage.setSrc( "http://images/qq.jpg");

다른 하나는 http 요청을 병합하는 가상 에이전트입니다

// 文件同步函数var synchronousFile = function( id ){
    console.log( "开始同步文件，id为：" + id );
}// 使用代理合并请求var proxySynchronousFile = (function(){
    var cache = [], // 保存一段时间内需要同步的ID
        timer; // 定时器指针
    return function( id ){
        cache[cache.length] = id;        if( timer ){            return;
        }
        timer = setTimeout( function(){
            proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
            clearTimeout( timer ); // 清空定时器
            timer = null;
            cache = [];
        },2000 );
    }
})();// 绑定点击事件var checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++]; ){
    c.onclick = function(){
        if( this.checked === true ){            // 使用代理进行文件同步
            proxySynchronousFile( this.id );
        }
    }
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!