设计模式——代理模式（控制对象的访问）

最新推荐文章于 2022-08-11 15:04:13 发布

cnailili

最新推荐文章于 2022-08-11 15:04:13 发布

阅读量395

点赞数

分类专栏：性能优化（前端）

本文链接：https://blog.csdn.net/cnailili/article/details/104460067

版权

性能优化（前端）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

设计模式——代理模式

代理模式：为一个对象提供一种代理，以控制这个对象的访问；代理对象起到类似中介的作用，会增加一些功能（效验、合并等），也会去掉原对象的一些功能；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        display:inline-block;
        border: 1px solid #090;
    }
    div img{
        width: 300px;
        height: 200px;
        margin-bottom: -4px;
    }
</style>
<body>
    <div id="demo">hello</div>
    <button type="addWidth">加宽</button>
    <button type="addBg">加背景</button>
    <button type="addFs">加字体</button>
    <button type="addFw">加粗</button>
    <button type="addC">加颜色</button>
    <script>
    //虚拟代理：
    //demo1： 实现图片未加载完成时用本地图片站位功能：
        var MyImage = function (id) {
            var oImg = new Image();
            this.setSrc = function (src) {
                oImg.src = src;
            }
            document.getElementById(id).appendChild(oImg);
        }
        var ProxyImage = (function () {
            var oMyImage = new MyImage('demo');
            var oNewIamge = new Image();
            oNewIamge.onload = function () {
                oMyImage.setSrc(oNewIamge.src); 
          //当图片全部请求完成后，直接将原站位图片的地址更改；
            }
            return function (src) {
                oMyImage.setSrc('./1.jpg');
                          //本地的一个站位图片；
                oNewIamge.src = src;

            }
        })()
        ProxyImage('http://attach.bbs.miui.com/forum/201111/21/205700txzuacubbcy91u99.jpg');
        //网上请求的图片资源；

    //demo2：实现用户连续发送数据时，将用户多次的请求操作先存下来，利用延时器最后一并一起发送数据：
    //这里用一个改变dom不同的样式的demo来模拟请求数据；
        var oBtnArray = document.getElementsByTagName('button');
        for(var i = 0; i < oBtnArray.length; i++) {
            oBtnArray[i].onclick = function(){
                realDeal(this);
            }
        }
        function deal (dom) {
            console.log(dom)
            switch (dom.getAttribute('type')){
                case "addWidth":
                    demo.style.width = demo.offsetWidth + 50 + 'px';
                    break;
                case "addBg":
                    demo.style.backgroundColor = 'yellow';
                    break;
                case "addFs":
                    demo.style.fontSize = '25px';
                    break;
                case "addFw":
                    demo.style.fontWeight = 'blod';
                    break;
                case "addC":
                    demo.style.color = 'green';
                    break;
            }
        }
        var MyProxy = function (func) {
            var cache = [];                           //通过一个数组做缓存；
            var timer = null;
            return function () {
                cache.push(arguments[0]);
                clearInterval(timer);
                timer = setTimeout(function () {      //进行延迟处理；
                    for(var i = 0; i < cache.length; i++) {
                        func.call(cache[i], cache[i]);
                    }
                    cache = [];
                }, 2000)
            }
        }
        var realDeal = MyProxy(deal);
    </script>

</body>
</html>

代理模式中除了上述的虚拟代理思想，还有保护代理（安全代理）模式，主要针对表单提交等操作，先在前端对用户操作进行过滤，保护服务器端的请求质量；

cnailili

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式——代理模式（控制对象的访问）

设计模式——代理模式代理模式：为一个对象提供一种代理，以控制这个对象的访问；代理对象起到类似中介的作用，会增加一些功能（效验、合并等），也会去掉原对象的一些功能；<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compat...
复制链接

扫一扫

专栏目录