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
相关推荐
Tyler_144 分钟前
iOS PlayWright mcp server
前端·ios·ai编程
嘟嘟07171 小时前
从零理解 MCP:手写一个本地 MCP Server 并接入 LangChain Agent
前端·后端
cocoafei1 小时前
GPT-5.6 后,别再混淆 ChatGPT 和 Codex 额度了
前端·人工智能·chatgpt
你怎么知道我是队长1 小时前
JavaScript的函数介绍
开发语言·前端·javascript
weedsfly1 小时前
观察者模式 vs 发布-订阅模式:从概念到实战,一次讲清楚
前端·javascript·面试
暗不需求1 小时前
手写 AJAX:从 XMLHttpRequest 到封装一个简易 axios
前端·面试
workflower1 小时前
人形机器人全身运动控制能力大幅提升
人工智能·深度学习·机器学习·设计模式·机器人·自动化
cxxcode1 小时前
CSS Loader 与样式处理链路
前端·css
电商API_180079052471 小时前
电商ERP 自动同步订单功能实现拆解与技术手段
服务器·前端·网络·爬虫
cxxcode1 小时前
CSS 隔离与 qiankun 样式问题总结
前端