资讯专栏INFORMATION COLUMN

javascript设计模式学习笔记之代理模式

big_cat / 3299人阅读

摘要:代理模式代理模式是为一个对象提供一个代用品或者占位符以便控制对它的访问引入代理模式,其实是为了实现单一职责的面向对象设计原则。

代理模式

代理模式是为一个对象提供一个代用品或者占位符, 以便控制对它的访问

引入代理模式,其实是为了实现单一职责的面向对象设计原则。

虚拟代理

将一些开销很大的对象, 延迟到正真需要的时候执行

        // 针对大图 增加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);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109255.html

相关文章

  • javascript设计模式学习笔记单例模式

    摘要:单例模式单例模式就是保证一个类仅有一个实例并提供一个访问它的全局访问点其最大的特点就是永远只返回一个实例实例通过来获取类的唯一对象其缺点也明显增加了类的不透明性透明的单例模式最终会被返回使用代理实现单例模式将负责管理单例的逻辑移到了代理类中 单例模式 单例模式 就是保证一个类仅有一个实例, 并提供一个访问它的全局访问点. 其最大的特点就是 永远只返回一个实例 var Sin...

    xiaolinbang 评论0 收藏0
  • JS代理模式JavaScript设计模式与开发实践》阅读笔记

    摘要:保护代理和虚拟代理保护代理当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤。虚拟代理在程序中可以能有一些代价昂贵的操作。而虚拟代理是最常用的一种代理模式。 代理模式 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。 保护代理和虚拟代理 保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤。...

    mist14 评论0 收藏0
  • 正则表达式

    摘要:最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

    yibinnn 评论0 收藏0
  • javascript设计模式学习笔记命令模式

    摘要:命令模式指的是一个执行某些特定事情的指令设计模式的主题总是把不变的事物和变化的事物分离开来在中函数作为一等对象所以命令模式其实是回调函数的一个面向对象的替代品设置命令命令集合刷新菜单界面命令触发条件接受者绑定命令 命令模式 指的是一个执行某些特定事情的指令 设计模式的主题: 总是把不变的事物和变化的事物分离开来 在javascript 中, 函数作为一等对象, 所以, 命令模式其实是...

    MobService 评论0 收藏0
  • javascript设计模式学习笔记迭代器模式

    摘要:迭代器模式顺序访问一个对象的对象的内部可分为内部迭代器和外部迭代器内部迭代器就是常见的或者外部迭代器实现了简单实现 迭代器模式 顺序访问一个对象的 对象的内部 可分为内部迭代器 和 外部迭代器 内部迭代器 就是常见的 forEach(), 或者 $.each() function forEach(arr, callback) { var i = 0, len...

    Jason_Geng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<