zoukankan      html  css  js  c++  java
  • 使用JavaScript浅谈代理模式

    什么是代理模式?

    代理模式的定义是:为一个对象提供一个代用品或者占位符,以便控制对它的访问。

    看一段代码:

    function getSomething(value) {
        if (value > 10) {
            return value * 2;
        }
    }

    在这里我们定义了一个函数,如果传入的值大于10,那么我们就返回它的2倍的值。嗯。。。挺好的,但是有不足之处。函数做了过多的事情,我们的目的就是获取参数的2倍值,在这里做了条件判断。(当然在这里并没有什么影响,我只是举一个简单的例子),我们希望的这个函数就是返回值就行了。

    在看一段代码:

    function getSomething(value) {
        return value * 2;
    }
    function proxtGet(value) {
        if (value <10) return;
        return getSomething(value);
    }

    现在我们分离了getSomething的功能,判断用proxyGet来做,那么getSomething就安安心心的做自己的事情了。

    其实就是一种保护代理,对目标对象我们提供了proxyGet方法进行保护,只有符合条件的才能操作它。

    假如有一天不需要做判断了,那么我们就直接调用getSomething就可以的到结果,看多方便。

    下面介绍一下虚拟代理:

    在web开发中,开销最大的无疑是网络请求,假设我们有一个列表,代表的是后台文件信息,我们点击一个列表,就要向后台发送打包文件的请求,对于拥有麒麟臂的你来说,这样的网络开销就是一场噩梦(假设这个操作的实时性要求不是很高),那么我们就可以这样子来操作,来减小开销:

    function sendFile(files) {
        // 做一些操作,然后发送文件信息给后台
        console.log('发送成功');
    }
    
    var  proxySendFile = (function () {
        var caches = [];
        var timer = null;
        return function (file) {
            caches.push(file);
            if (timer) { return };
            timer = setTimeout(function () {
                sendFile(caches);
                clearInterval(timer);
                timer = null;
                caches.length = 0;
            }, 2000)
        }
    }
    )()

    在这里sendFile是发送文件的操作,我们使用proxySendFIle来代理发送文件的操作,2000只发起一次请求,你说可以不可以。就算你的麒麟臂已经无人可挡,在这里你跟别人没有区别。

    下面我们给出一个用代理模式优化异步请求的操作:

    var proxyAjax = (
        function () {
            var caches = {};
            return function (param, callback) {
                if (caches[param]) { callback(caches[param]); console.log('有结果直接返回'); return; };
                // 模拟异步请求
                sendData(param, function (data) {
                    caches[param] = data;
                    callback(data);
                    console.log('后台获取');
                });
    
            }
        }
    )();
    function sendData(param, callback) {
        setTimeout(function () {
            callback(param + Math.random());
        }, 1000);
    }
    function ajax(param, callback) {
        proxyAjax(param, callback);
    }
    
    ajax('A', function (data) {
        console.log(data);
    });
    setTimeout(function () {
        ajax('A', function (data) {
            console.log(data);
        });
    }, 2000)

    在这里我们用proxyAjax代理了ajax的请求,当然这里只是简单的模拟,具体的还需要优化,聪明的你因该能看的懂我tm的到底在写一些什么,好了看看结果:

    还行,对吧。(哈哈哈哈哈。。。呃,卡住了);

  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/jsydb/p/12527937.html
Copyright © 2011-2022 走看看