javascript设想形式进修笔记之代办形式

代办形式

  • 代办形式是为一个对象供应一个代用品或许占位符, 以便掌握对它的接见
  • 引入代办形式,实在是为了完成单一职责的面向对象设想准绳。

假造代办

  • 将一些开支很大的对象, 延晚到正真须要的时刻实行
        // 针对大图 增添loading图
        // 建立 img
        var myImage = (function () {
            var imgNode = document.createElement('img');

            document.body.appendChild(imgNode);

            return {
                // 直接设置 img 的src
                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.jpg');
                    img.src = src;
                }
            }
        })();

        proxyImage.setSrc('https://xxx.com/realImage.png')

缓存代办

  • 可认为一些开支大的运算效果供应临时的存储
    // 表现了 单一职责准绳,
    // 原函数
    var multi = function () {
        var a = 1;
        for (var i = 0, l = arguments.length; i < l; i++) {
            a = a * arguments[i];
        }
        console.log(a);
        return a;
    }

    // 代办函数
    var proxyMulti = (function () {
        var cache = {};
        return function () {
            var args = Array.prototype.join.call(arguments, ',');
            if (args in cache) {
                return cache[args];
            }
            return cache[args] = multi.apply(this, arguments);
        }
    })();

    proxyMulti(1, 2, 3, 4, 5);
    proxyMulti(1, 2, 3, 4, 5);
    原文作者:SonLior
    原文地址: https://segmentfault.com/a/1190000018721072
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞