JavaScriptプロキシモード-jsチュートリアル-php.cn

JavaScriptプロキシモード

php中世界最好的语言

リリース： 2018-03-13 17:49:35

オリジナル

1838 人が閲覧しました

今回はJavascriptのプロキシモードと、Javascriptプロキシモードの注意事項について、実際のケースを見てみましょう。

プロキシパターンの定義: このオブジェクトへのアクセスを制御するために、他のオブジェクトにプロキシを提供します。場合によっては、あるオブジェクトが適切でないか、別のオブジェクトを直接参照できない場合、プロキシオブジェクトがクライアントとターゲットオブジェクトの間の仲介者として機能することがあります。

仮想プロキシは、実際に必要になるまで一部の高価なオブジェクトの作成と実行を遅らせます

画像の遅延読み込み

//图片加载let imageEle = (function(){    let node = document.createElement(&#39;img&#39;);    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(&#39;loading.gif&#39;);
        }
    }
})();
proxy.setSrc(&#39;example.png&#39;);

ログイン後にコピー

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(&#39;,&#39;));
            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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScriptの戦略パターン

JSでの関数スロットルの使用

以上がJavaScriptプロキシモードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。