前端常用设计模式之代理模式

代理模式:在有耦合关系的两个对象之间建立代理对象, 代理对象起到类似中介的作用,如校验, 合并等.例子

虚拟代理:把开销很大的对象,延迟到正在需要时候才创建如图片懒加载. 文件一起上传

安全代理: 控制对象的访问权限.如注册验证, 如果你的用户名格式不正确, 代理对象控制, 不会发ajax请求, 智能推荐正确格式的用户名;

例子一: 屌丝追女神想送花, 条件:女生心情多变, 当女神心情好时候,收到花会说谢谢, so,屌丝找一个老司机帮自己观察, 老司机瞅着合适机会就通知屌丝送花;

心情不好时,收到花后果很严重 (老司机就是代理对象)

        var diaosi = {
            sendFlower: function (girl) {
                girl.recieveFlower();
            }
        }
        var girl = {
            mood: null,
            words:'',
            recieveFlower: function () {
                this.words = this.mood == 'good' ? "thanks" : 'get out' 
                console.log (this.words)
            },
            changeMood: function () {//girl心情不断变化,屌丝要拜托老司机送花
                setInterval(() => {
                    this.mood = Math.random() - 0.5 > 0 ? 'good' : "sad";
                    // console.log('gril的心情'+ this.mood)
                },300)
            }
        }
        var oldDriver = {
            watch: function(){
                var timer = setInterval(() =>{
                    var mood = girl.mood;
                //监视心女神心情
                    if(mood == 'good'){
                        diaosi.sendFlower(girl);
                        clearInterval(timer)
                    }
                },300)
            }
        }
girl.changeMood()
cheng.watch()

　　例子二:图片预加载和懒加载代理; 控制图片的懒加载和预加载的发生时间和过程;

要按照顺序说的话,先懒加载:什么时候需要什么时候才加载,它针对的是全加载,就是把网页上所有的图片都加载完,增加网络请求的负担,造成请求资源浪费

再预加载: 完全onload了资源以后,才往dom里插入.它对应的是直接设置src和直接插入dom;造成加载过程中容易出现图片从上往下慢慢加一段段出现,加重了浏览器的渲染负担,

 <style>
        html,
        body {
            height: 3000px;
        }
        button {
            position: absolute;
            top: 1800px;
        }
        div {
            position: absolute;
            top: 2000px;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <button>开始加载</button>
    <script>
        var insertImg = (function () {
            var result = null;
            return function (id, src) {
                if (result) {
                    return result;
                }
                var img = new Image()
                this.setSrc = function (src) {
                    img.src = src;
                }
                document.getElementById(id).appendChild(img);
                result = this;
            }
        })()

        document.onscroll = function () {
            var oTop = demo.offsetTop;
            if (window.pageYOffset >= oTop) {
            proxy('http://n.sinaimg.cn/sinacn00/292/w476h616/20180404/2d8e-fytnfyn8190914.png')//真正的需要加载的图片
            }
        }
    
        var proxy =(function(){//当事件触发时候,才去执行proxy请求图片,是懒加载
            var oImg = new insertImg('demo');//如果有多个需要插入图片的div,demo不能写死
            oImg.setSrc('http://n.sinaimg.cn/sinacn21/400/w800h1200/20180406/3ec4-fysuuyc3274232.jpg');//占位图片,资源一旦请求过,存在缓存里,其他的div也用
            
            return function(src){//这段代码是预加载,设定了一个傀儡图片,傀儡图片的作用是请求真正的图片资源,当资源请求完成后就一次性渲染到dom里
                var myImg = new Image();
                myImg.onload = function () {
                oImg.setSrc(src)
            }
            myImg.src = src;
            }
        })()

例三:挨个点击许多小块后,颜色一起出现变化

    <style>
    #wrapper{
        height: 200px;
         100%;
        text-align: center;
        border: 1px solid
    }
    #wrapper div{
        display: inline-block;
        height: 100%;
         200px;
        border: 1px solid;
        box-sizing: border-box;
        cursor: pointer;
    }
    button{
        margin: 0 auto;
    }
    </style>
</head>
<div id="wrapper">
    <div class="blue">blue</div>
    <div class="yellow">yellow</div>
    <div class="red">red</div>
    <div class="green">green</div>
</div>
<body>
    <script>
       function changeColor (div){
           var color = div.className
           div.style.background = color

       }
wrapper.onclick = function(e){
    proxy(e.target)
}
var proxy = (function(){
    var timer = null;
    var arr = [];
    return function(div){
        clearTimeout(timer)
        arr.push(div);
        timer = setTimeout(() => {
            console.log(11111)
            arr.forEach(function(ele){
                changeColor(ele)
            })
        }, 2000);
    }
})()

例四: 保护代理(见策略模式)

<style>
#wrapper{
height: 200px;
width: 100%;
text-align: center;
border: 1px solid
}
#wrapper div{
display: inline-block;
height: 100%;
width: 200px;
border: 1px solid;
box-sizing: border-box;
cursor: pointer;
}
button{
margin: 0 auto;
}
</style>
</head>
<div id="wrapper">
<div class="blue">blue</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
<div class="green">green</div>
</div>
<body>
<script>
function changeColor (div){
var color = div.className
div.style.background = color

       }
wrapper.onclick = function(e){
    proxy(e.target)
}
var proxy = (function(){
    var timer = null;
    var arr = [];
    return function(div){
        clearTimeout(timer)
        arr.push(div);
        timer = setTimeout(() => {
            console.log(11111)
            arr.forEach(function(ele){
                changeColor(ele)
            })
        }, 2000);
    }
})()