javascript 设计模式(代理模式) #114

wl05 · 2020-04-21T04:00:39Z

概念

代理模式提供对一个对象的访问控制

实现

<!DOCTYPE html>
<html>

<body>

</body>
<script>
    var myImage = (function () {
        var imgNode = document.createElement('img')
        document.body.appendChild(imgNode)
        return {
            setSrc: function (src) {
                imgNode.src = src
            }
        }
    })()
    var proxyImage = (function () {
        var img = new Image()

        img.onload = function () {
            myImage.setSrc(this.src)
        }
        return {
            setSrc: function (src) {
                myImage.setSrc('https://pic.52112.com/JPG-180505/180505_34/C4DKZ4vo1K_small.jpg')
                img.src = src
            }
        }
    })()
    proxyImage.setSrc('https://img.tukuppt.com/bg_grid/00/14/86/WvJAithG7a.jpg!/fh/350')
</script>

</html>

这个demo我们实现了一个图片预加载的功能，在图片资源还没有真正的加载出来之前我们先用一张图片作为占位，当真正想要加载的图片加载完成时我们再把图片渲染出来。

参考资料

JavaScript设计模式与开发实践-第六章-代理模式

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript 设计模式(代理模式) #114

javascript 设计模式(代理模式) #114

wl05 commented Apr 21, 2020

javascript 设计模式(代理模式) #114

javascript 设计模式(代理模式) #114

Comments

wl05 commented Apr 21, 2020

概念

实现

参考资料