懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!

这篇具有很好参考价值的文章主要介绍了懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

系列首发gong zhong hao[『非同质前端札记』] ,若不想错过更多精彩内容,请“星标”一下,敬请关注gong zhong hao最新消息。文章来源地址https://www.toymoban.com/news/detail-617982.html

懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!

何为代理模式

  • 例如,你想预约一家公司的董事长会面,按照正常流程,你只能通过先联系他的秘书,然后跟他的秘书预约时间,约好时间后你们两个才能会面。(也就是说,代理模式的关键是有个中间者来协调你与对方之间的事情,只能通过中间者将事情转达给另一方)。
    懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!,javascript,代理模式,开发语言

代理模式的应用

  • 在 Web 开发中,我们通常会在网站或程序中用到图片,当某张图片过大时或网络不佳时,图片区域就是显示一段空白或者直接没有显示(没有设置图片区域高度,待图片加载完成后才会完成自适应图片高度来进行 layout)。友好的做法是在真正的图片还未加载完成时图片区域显示一个loading占位符。
  • 如下代码:
var createImg = (function () {
    var imgNode = document.createElement("img");
    document.appendChild(imgNode);

    return {
        setSrc: function (src) {
            imgNode.src = src;
        },
    };
})();

var proxyImg = (function () {
    var img = new Image();
    img.onload = function () {
        createImg.setSrc(this.src);
    };
    return {
        setSrc: function (src) {
            createImg.setSrc("loading.gif");
            img.src = src;
        },
    };
})();

proxyImg.setSrc("bg.jpg");

代理的意义

  • 可能会有人疑惑,为什么一个图片预加载功能,非要使用什么模式来实现,不适用照样也能实现啊,如下:
var createImg = (function () {
    var imgNode = document.createElement("img");
    document.appendChild(imgNode);

    var img = new Image();
    img.onload = function () {
        imgNode.src = img.src;
    };

    return {
        setSrc: function (src) {
            imgNode.src = "loading.gif";
            img.src = src;
        },
    };
})();

createImg.setSrc("bg.jpg");
  • 为了说明为什么要使用代理模式的意义,我们必须引入一个面向对象的设计原则——单一职责原则,单一职责原则指的是:对于一个类而言,应该仅有一个引起它改变的入口。如果一个对象承担了很多职责,那这个对象将变得很臃肿,那引起它变化的原因可能会有很多个。如果一个对象承担的职责过多,就等于把这些职责耦合在了一起,这种耦合会导致代码很脆弱和低内聚的设计。
  • 在面向对象的程序设计中,大多数情况下,若违反其他任何原则,同时将违反开放-封闭原则。

代理合并请求数据

  • 比如有一个定时任务,会每个一段时间要往数据库中存储一些数据,如果当有新数据进来时,就调用存储数据的接口,这样既浪费性能,代码的执行效率也不会太高。那要求我们写一个
  • 可参考如下:
// 真实对象类 - 用于存储数据
class Storage {
    constructor() {
        this.data = [];
    }

    storeData(data) {
        // 模拟存储数据的操作
        console.log(`Storing data: ${data}`);
        this.data.push(data);
    }

    displayData() {
        console.log("Stored data:", this.data);
    }
}

// 代理对象类 - 延迟存储操作
class ProxyStorage {
    constructor() {
        this.storage = new Storage();
        this.pendingData = [];
        this.timer = null;
        this.delay = 5000; // 定时存储的延迟时间设定为5秒
    }

    storeData(data) {
        this.pendingData.push(data);
        this.scheduleStorage();
    }

    scheduleStorage() {
        if (!this.timer) {
            this.timer = setTimeout(() => {
                this.flushPendingData();
                this.timer = null;
            }, this.delay);
        }
    }

    flushPendingData() {
        this.pendingData.forEach((data) => {
            this.storage.storeData(data);
        });
        this.pendingData = [];
    }

    displayData() {
        this.storage.displayData();
    }
}

// 使用代理对象进行数据存储
const proxyStorage = new ProxyStorage();

// 模拟数据产生
function generateData() {
    const data = Math.random(); // 这里使用随机数作为数据示例
    // 将数据添加到带存储的数据队列中,并启动定时器来延迟存储操作。当在延迟时间内再次调用 storeData 时,则会每次更新带存储的数据队列数据。当定时器触发时,代理对象则会调用 Storage 对象的存储方法,将所有带存储的数据存储起来。
    proxyStorage.storeData(data);
}

// 调用 generateData() 来模拟产生数据
// 在某一个时间段内连续产生数据,但实际触发存储的时间是延迟了的
setInterval(generateData, 1000);

// 模拟数据存储结束后,手动调用 displayData() 显示已存储的数据
setTimeout(() => {
    proxyStorage.displayData();
}, 15000); // 这里设定15秒后结束数据存储并展示存储结果
  • 上面我们实现了基本的数据定时存储功能,但并不完整,如果我们想再加一个暂停,重新开始,停止的逻辑,那如何编写呢?
  • 如下:
// 真实对象类 - 用于存储数据
class Storage {
    constructor() {
        this.data = [];
    }

    storeData(data) {
        // 模拟存储数据的操作
        console.log(`Storing data: ${data}`);
        this.data.push(data);
    }

    displayData() {
        console.log("Stored data:", this.data);
    }
}

// 代理对象类 - 延迟存储操作和定时暂停
class ProxyStorage {
    constructor() {
        this.storage = new Storage();
        this.pendingData = [];
        this.timer = null;
        this.delay = 5000; // 定时存储的延迟时间设定为5秒
        this.paused = false; // 初始状态为未暂停
    }

    storeData(data) {
        this.pendingData.push(data);
        this.scheduleStorage();
    }

    scheduleStorage() {
        if (!this.paused && !this.timer) {
            this.timer = setTimeout(() => {
                this.flushPendingData();
                this.timer = null;
            }, this.delay);
        }
    }

    flushPendingData() {
        this.pendingData.forEach((data) => {
            this.storage.storeData(data);
        });
        this.pendingData = [];
    }

    pause() {
        this.paused = true;
        clearTimeout(this.timer);
        this.timer = null;
    }

    restart() {
        this.paused = false;
        this.scheduleStorage();
    }

    stop() {
        this.pause();
        this.pendingData = [];
    }

    displayData() {
        this.storage.displayData();
    }
}

// 使用代理对象进行数据存储
const proxyStorage = new ProxyStorage();

// 模拟数据产生
function generateData() {
    const data = Math.random(); // 这里使用随机数作为数据示例
    proxyStorage.storeData(data);
}

// 调用 generateData() 来模拟产生数据
// 在某一个时间段内连续产生数据,但实际触发存储的时间是延迟了的
const intervalId = setInterval(generateData, 1000);

// 模拟数据存储进行一段时间后,停止定时器并清空待存储的数据
setTimeout(() => {
    // proxyStorage.stop();
    proxyStorage.pause();
    console.log("Timer stopped and pending data cleared");
}, 8000); // 这里设定8秒后停止定时器和清空待存储的数据

// 模拟数据存储结束后,手动调用 displayData() 显示已存储的数据
setTimeout(() => {
    proxyStorage.displayData();
}, 15000); // 这里设定15秒后结束数据存储并展示存储结果

// 模拟数据存储恢复定时器
setTimeout(() => {
    proxyStorage.restart();
    console.log("Timer restarted");
    clearInterval(intervalId);
}, 20000); // 这里设定20秒后恢复定时器

缓存代理

  • 在为了一些开销较大的运算结果和接口请求时,我们需要使用缓存代理来进行优化,为防止重复的请求造成性能浪费。
  • 题目如下:
  • 通过代理对象来实现对电影信息的缓存
    1. 创建一个真实对象 MovieService,其中包含一个方法 getMovie(id) 用于获取电影信息。模拟返回一些电影数据。
    2. 创建一个代理对象 CachedMovieServiceProxy,通过代理对象实现对电影信息的缓存。
    3. 代理对象内部维护一个缓存对象 cache,在第一次请求时将电影信息存入缓存,并在后续请求时直接从缓存中获取。
    4. 当调用代理对象的 getMovie(id) 方法时,如果缓存中存在对应的电影信息,则直接返回缓存数据;否则,调用真实对象的 getMovie(id) 方法获取电影信息,并将结果存入缓存。
  • 示例输入和输出:
// input:
const movieServiceProxy = new CachedMovieServiceProxy();

console.log(movieServiceProxy.getMovie(1)); // 输出电影信息并缓存
console.log(movieServiceProxy.getMovie(2)); // 输出电影信息并缓存
console.log(movieServiceProxy.getMovie(1)); // 从缓存中输出电影信息


// output:
// Fetching movie with id 1 from the database...
// Caching movie with id 1...
{ id: 1, title: "Movie A", director: "Director A" }

// Fetching movie with id 2 from the database...
// Caching movie with id 2...
{ id: 2, title: "Movie B", director: "Director B" }

// Retrieving movie with id 1 from cache...
{ id: 1, title: "Movie A", director: "Director A" }
  • 实现如下:
// 真实对象类 - 电影服务
class MovieService {
    constructor() {
        // 模拟电影数据
        this.movies = [
            { id: 1, title: "Movie A", director: "Director A" },
            { id: 2, title: "Movie B", director: "Director B" },
            { id: 3, title: "Movie C", director: "Director C" },
        ];
    }

    // 获取电影信息
    getMovie(id) {
        console.log(`Fetching movie with id ${id} from the database...`);
        // 模拟从数据库获取电影信息的操作
        const movie = this.movies.find((movie) => movie.id === id);
        return movie;
    }
}

// 代理对象类 - 缓存代理
class CachedMovieServiceProxy {
    constructor() {
        this.movieService = new MovieService();
        this.cache = {};
    }

    // 获取电影信息(代理方法)
    getMovie(id) {
        if (this.cache[id]) {
            // 如果缓存中有对应的电影信息,则直接返回缓存数据
            console.log(`Retrieving movie with id ${id} from cache...`);
            return this.cache[id];
        } else {
            // 否则,调用真实对象的方法获取电影信息,并将结果存入缓存
            const movie = this.movieService.getMovie(id);
            console.log(`Caching movie with id ${id}...`);
            this.cache[id] = movie;
            return movie;
        }
    }
}

// 使用代理对象获取电影信息
const movieServiceProxy = new CachedMovieServiceProxy();

console.log(movieServiceProxy.getMovie(1)); // 第一次请求,从真实对象获取并缓存
console.log(movieServiceProxy.getMovie(2)); // 第二次请求,从真实对象获取并缓存
console.log(movieServiceProxy.getMovie(1)); // 第三次请求,从缓存中获取

代理模式的优缺点

  • 优点:
    1. 控制访问/增加安全性:可通过代理对象对真实对象的访问进行控制,增加了对真实对象的保护
    2. 延迟初始化:将高开销的操作延迟到真正需要的时候,可优化一些性能
    3. 封装性:可隐藏对象的复杂性,只需要与代理对象打交道即可
  • 缺点:
    1. 增加复杂性:虽然代理模式可分离关注点,但同时也增加了代码的复杂性,因为需要创建和管理代理对象
    2. 透明性问题:虽然透明性是一个优点,但如果过度使用,可能导致代码难以理解和调试。
    3. 性能开销:代理对象需要拦截所有对原始对象的访问,这会导致一些性能开销。

代理模式的适用场景

  1. 访问控制:可用于限制对对象的访问,例如来控制对一些敏感数据的访问。
  2. 虚拟代理:对一个对象需要从网络上加载大量的数据时,可使用虚拟代理来优化,在需要时再加载数据。
  3. 保护代理:由于代理模式可以控制对真实对象的访问,因此可以保护代理。
  4. 缓存代理:可用于实现一个高度重用,并且这个操作很好使的情况。
  5. 智能引用代理:当需要在访问对象时需要执行一些额外的操作时,可使用智能引用代理。
  6. 日志记录:可用于在调用真实对象的方法前后进行日志记录,包括参数,返回结果等信息,便于调试和排查问题。
Tip: 文章部分内容参考于曾探大佬的《JavaScript 设计模式与开发实践》。文章仅做个人学习总结和知识汇总

特殊字符描述:

  1. 问题标注 Q:(question)
  2. 答案标注 R:(result)
  3. 注意事项标准:A:(attention matters)
  4. 详情描述标注:D:(detail info)
  5. 总结标注:S:(summary)
  6. 分析标注:Ana:(analysis)
  7. 提示标注:T:(tips)

到了这里,关于懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript设计模式-三种代理

    将抽象与实现隔离开来,以便二者独立变化。常用于事件驱动的程序设计。有些地方它和适配器与门面很类似。下面是最简单的桥接模式,但适配器是一种包装器。门面一般是同一个类中方法的抽象和组合,而桥接通常是收集几个类的。 这种方式也要注意使用场合,如果一个

    2024年01月20日
    浏览(43)
  • Cesium修改原始鼠标视图操作, 右键按住改变视角, 滚轮滚动进行zoom改变

    主要使用API为 screenSpaceCameraController

    2024年02月13日
    浏览(43)
  • 代理模式——对象的间接访问

    由于某些原因,客户端不想或不能直接访问某个对象,此时可以通过一个被称为“代理”的第三者来实现间接访问,该方案对应的设计模式被称为代理模式。 代理模式是一种应用很广泛的结构型设计模式,而且变化很多。在代理模式中引入了一个新的代理对象,代理对象可以

    2024年02月14日
    浏览(76)
  • 篇十二:代理模式:控制对象访问

    篇十二: “代理模式:控制对象访问” 开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun/。 另外有2本不错的关于设计模式的资料,分享出来与大家学习参考。 链接:https://pan.baidu.com/s/1RmhQF_o1CdK8U7s5KeILog?pwd

    2024年02月13日
    浏览(39)
  • javascript设计模式-面向对象基础

    在JS这种弱类型的语言中,类型不匹配错误很难跟踪。可以使用接口来进行类型检查。如果强制使用,又会弱化语言的灵活性。因为有额外的代码调用,所以又会降低性能。解决方法就是在开发时进行类型检查,在开始完成后删除此部分代码。 但JS中的接口实现方式是模拟的

    2024年01月18日
    浏览(37)
  • JAVA设计模式6:代理模式,用于控制对目标对象的访问

    作者主页 :Designer 小郑 作者简介 :3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型,CSDN博客专家,阿里云社区专家博主,蓝桥云课讲师。 代理模式是一种常用的设计模式,它提供了一个代理对象,用于控制对目标对象的访问 。 在代理模式

    2024年02月07日
    浏览(43)
  • 设计模式 -- 策略模式(传统面向对象与JavaScript 的对比实现)

    规则:根据员工的工资基数和年底绩效情况计算年终奖 初级实现 缺点 多重 if else 违反开发-封闭原则,可维护性差 复用性差 使用组合函数重构代码 使用组合函数来重构代码,把各种算法封装到一个个的小函数里面,这些小函数有着良好的命名,可以一目了然地知道它对应着

    2024年02月11日
    浏览(67)
  • JavaScript抽象工厂模式:打造高效的对象创建工厂

    在JavaScript中,对象的创建是非常常见的操作。但是,如果我们需要创建多个具有相似属性和方法的对象,手动一个一个创建会非常繁琐。这时候,抽象工厂模式就可以派上用场了。 抽象工厂模式是一种创建型设计模式,它可以通过提供一个接口来创建一系列相关或相互依赖

    2024年02月12日
    浏览(40)
  • Vue2和vue3中双向数据绑定的原理,ES6的Proxy对象代理和JavaScript的Object.defineProperty,使用详细

    简介: Object.defineProperty大家都知道,是vue2中双向数据绑定的原理,它 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; 而Proxy是vue3中双向数据绑定的原理,是ES6中一种用于创建代理对象的特殊对象,

    2024年02月15日
    浏览(47)
  • 【Java基础教程】(十五)面向对象篇 · 第九讲:抽象类和接口——定义、限制与应用的细节,初窥模板设计模式、工厂设计模式与代理设计模式~

    掌握 抽象类和接口的定义、使用、区别、常见设计模式; 抽象类是代码开发中的重要组成部分,利用抽象类可以明确地定义子类需要覆写的方法,这样相当于在语法程度上对子类进行了严格的定义限制,代码的开发也就更加标准。下面具体介绍抽象类的概念。 普通类可以直

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包