javascript设计模式-（五）

代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景。比如，明星都 有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演 出的细节和报酬都谈好之后，再把合同交给明星签。

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身 对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之 后，再把请求转交给本体对象。

虚拟代理

虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建

虚拟代理实现图片预加载

    var myImage=(function(){
        var imgNode=document.createElement("img");
        document.getElementById("contentBox").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:/Users/YQ/Desktop/QQ%E6%88%AA%E5%9B%BE20161124145232.png");//默认图片
                img.src=src;
            }
        };
    })();` 
        </pre>

分时函数

在短时间内往页面中大量添加 DOM节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死，这个问题的解决方案之一是下面的 timeChunk 函数， timeChunk 函数让创建节点的工作分批进 行，比如把 1秒钟创建 1000个节点，改为每隔 200毫秒创建 8个节点。

    var timeChunk = function(ary, fn, count) {
        var obj,
            t;
        var len = ary.length;
        var start = function() {
            for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                var obj = ary.shift();
                fn(obj);
            }
        };
        return function() {
            t = setInterval(function() {
                if (ary.length === 0) { // 如果全部节点都已经被创建好
                    return clearInterval(t);
                }
                start();
            }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
        };
    };

    var ary = [];
    for (var i = 1; i <= 1000; i++) {
        ary.push(i);
    };
    var renderFriendList = timeChunk(ary, function(n) {
        var div = document.createElement('div');
        div.innerHTML = n;
        document.getElementById("contentBox").appendChild(div);
    }, 8);
    renderFriendList();

转载于:https://www.cnblogs.com/hlere/p/6748647.html