「JavaScript設計モードと開発実践」読書ノートの代理モデル

1.プロキシモード
プロキシモードは、オブジェクトに対するアクセスを制御するための代替品またはプレースホルダを提供するものです.
1.1一般的なピクチャローディング

var myImage=(function () {

        var imgNode=document.createElement('img');

        document.body.appendChild(imgNode);

        return {

            setSrc: function (src) {

                imgNode.src=src;

            }

        }

    }

)();

myImage.setSrc('http://xxx.com/xxx.jpg');

1.2仮想エージェントは、画像のプリロードを実現する.
web開発では、画像のプリロードは、まず1枚のloading画像でビットを占め、その後、非同期的な方法で画像をロードし、画像のロードが完了したら、それを利用してノードに充填するのが一般的です.

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('loading.gif');

            img.src=src;

        }

    }

})();

proxyImage.setSrc('http://xxx.com/xxx.jpg');

1.3代理を使わないプリロード画像の実現方式

var MyImage=(function () {

    var imgNode=document.createElement('img');

    document.body.appendChild(imgNode);

    var img=new Image();

    img.onload= function () {

        imgNode.src=img.src;

    };

    return  {

        setSrc: function (src) {

            imgNode.src='loading.gif';

            img.src=src;

        }

    }

})();

MyImage.setSrc('http://xxx.com/xxx.jpg');

上記のコードは、プロキシモードではなく、ピクチャプリロードを実現することもできますが、上記のコードは、単一の職責原則コードに違反しています.