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
相关推荐
空白诗14 分钟前
前端隐藏元素的方式有哪些?HTML 和 CSS 中隐藏元素的多种方法
前端·css·html
LilySesy19 分钟前
SAP+Internet主题HTML样式选择
前端·html·sap·abap·internet服务·its·扫码枪
EasyNTS24 分钟前
H.265流媒体播放器EasyPlayer.js H.264/H.265播放器chrome无法访问更私有的地址是什么原因
javascript·h.265·h.264
AiFlutter27 分钟前
Flutter-Padding组件
前端·javascript·flutter
她说人狗殊途30 分钟前
设计模式学习
java·学习·设计模式
吾即是光42 分钟前
Xss挑战(跨脚本攻击)
前端·xss
渗透测试老鸟-九青42 分钟前
通过组合Self-XSS + CSRF得到存储型XSS
服务器·前端·javascript·数据库·ecmascript·xss·csrf
xcLeigh1 小时前
HTML5实现俄罗斯方块小游戏
前端·html·html5
发现你走远了1 小时前
『VUE』27. 透传属性与inheritAttrs(详细图文注释)
前端·javascript·vue.js
VertexGeek2 小时前
Rust学习(五):泛型、trait
前端·学习·rust