JavaScriptプロキシモード

今回はJavascriptのプロキシモードと、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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScriptの戦略パターン

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

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