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 分钟前
使用C++11改进工厂方法模式:支持运行时配置的增强实现
开发语言·c++·程序人生·设计模式
一枚前端小能手2 分钟前
🎨 用户等不了3秒就跑了,你这时如何是好
前端
Eddy4 分钟前
什么时候应该用useCallback
前端
愿化为明月_随波逐流5 分钟前
关于uniapp开发安卓sdk的aar,用来控制pda的rfid的扫描
前端
Leo来编程5 分钟前
设计模式3-模板方法模式
设计模式·模板方法模式
探码科技6 分钟前
AI知识管理全面指南:助力企业高效协作与创新
前端
Eddy7 分钟前
react中什么时候应该用usecallback中代码优化
前端
Aurora01038 分钟前
树型结构,动态计算-实现表单合并【行、列】
javascript
Juchecar15 分钟前
Vue3 应用、组件概念详解 - 初学者完全指南
前端·vue.js
w_y_fan16 分钟前
双token机制:flutter_secure_storage 实现加密存储
前端·flutter