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
相关推荐
xxy-mm6 小时前
Javascript 中的继承
开发语言·javascript·ecmascript
锋行天下7 小时前
公司内网部署大模型的探索之路
前端·人工智能·后端
1024肥宅8 小时前
手写 EventEmitter:深入理解发布订阅模式
前端·javascript·eventbus
海市公约9 小时前
HTML网页开发从入门到精通:从标签到表单的完整指南
前端·ide·vscode·程序人生·架构·前端框架·html
3秒一个大10 小时前
HTML5 与 JavaScript 中的二进制数据处理:ArrayBuffer 与 TextEncoder/Decoder 实践
javascript
purpleseashell_Lili10 小时前
如何学习 AG-UI 和 CopilotKit
javascript·typescript·react
行云流水62610 小时前
前端树形结构实现勾选,半勾选,取消勾选。
前端·算法
diudiu_3310 小时前
web漏洞--认证缺陷
java·前端·网络
繁华似锦respect10 小时前
C++ 智能指针底层实现深度解析
linux·开发语言·c++·设计模式·代理模式
阿珊和她的猫10 小时前
<video>` 和 `<audio>` 标签的常用属性解析
前端