JS設計模式之代理模式詳解

這次帶給大家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中文網其它相關文章！

推薦閱讀：

JS設計模式之建造者模式詳解

JS的設計模式之建構子模式詳解

js設計模式之-單例模式的使用

以上是JS設計模式之代理模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！