js设计模式之代理模式

应用场景图片懒加载

javascript 复制代码
class MyImage {
    constructor() {
        this.img = new Image()
        document.body.appendChild(this.img)
    }
    setSrc(src) {
        this.img.src = src
    }
}

class ProxyImage {
    constructor() {
        this.proxyImage = new Image()
    }

    setSrc(src) {
        let myImageObj = new MyImage()
        myImageObj.img.src = 'file://xxx.png'  //为本地图片url
        this.proxyImage.src = src
        this.proxyImage.onload = function() {
            myImageObj.img.src = src
        }
    }
}

var proxyImage = new ProxyImage()
proxyImage.setSrc('http://xxx.png') //服务器资源url
相关推荐
拳打南山敬老院1 分钟前
Context 不是压缩出来的,而是设计出来的
前端·后端·aigc
用户3076752811275 分钟前
💡 从"傻等"到"流淌":我在AI项目中实现流式输出的血泪史(附真实代码+深度解析)
前端
bluceli6 分钟前
前端性能优化实战指南:让你的网页飞起来
前端·性能优化
UIUV7 分钟前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
SuperEugene8 分钟前
Vue状态管理扫盲篇:如何设计一个合理的全局状态树 | 用户、权限、字典、布局配置
前端·vue.js·面试
没想好d9 分钟前
通用管理后台组件库-9-高级表格组件
前端
阿虎儿12 分钟前
React Hook 入门指南
前端·react.js
核以解忧36 分钟前
借助VTable Skill实现10W+数据渲染
前端
WangHappy38 分钟前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
李剑一42 分钟前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js