JSデザインパターンのプロキシパターンを詳しく解説

今回は、JS プロキシ モード の デザイン パターン と、JS プロキシ モード 注意事項 について詳しく説明します。以下は実践的なケースです。見てみましょう。

コンセプト: プロキシ パターンは、オブジェクトへのアクセスを制御するために、オブジェクトの代替またはプレースホルダーを提供することです。つまり、現在のオブジェクトが単一の責任を負うことを保証するには、コードの効率を改善したり、ステータスを判断したりするために、現在のオブジェクトのロジックを処理する別のオブジェクトを作成する必要があります。プロキシには、ファイル、リソースなど、ほぼすべてのオブジェクトを使用できます。 、メモリ内のオブジェクト、またはコピーが難しいもの。一般的なエージェントには、リモート エージェント、仮想エージェント、セキュリティ エージェント、およびインテリジェント ガイダンスが含まれます。主に、仮想エージェントである 2 つの最も一般的なエージェント モードを紹介します。

機能と注意事項
1. リモートプロキシ (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");

もう 1 つは、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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

JSデザインパターンのビルダーパターンの詳細な説明

JSデザインパターンのコンストラクターパターンの詳細な説明

jsデザインパターン - シングルトンパターンの使用

以上がJSデザインパターンのプロキシパターンを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。