【javaScript随笔】03 一个简单的js代理

本文链接：https://blog.csdn.net/fwx426328/article/details/81610833

思考起源于这样一个问题：

如果一个A对象的加载时机很难把握，那么我们调用他方法的时候，就很难控制。

这样子我们就需要做一个代理对象Proxy，调用A对象上面的方法时，可以统一把消息推送到Proxy上，Proxy将消息存到一个队列里面，然后去嗅探A是否加载，如果A加载完毕，Proxy再把队列里面的消息推送给A。

simple is best !

举一个简单的例子：

下面的对象是一个服务对象，它的加载时机无法把握。

// 该对象用于处理逻辑
window.Service = {
    // 加载完成的标识
    load:true, 
    // add是一个数组求和方法
    add: function(numList, callback){
        var res = 0;
        for(var i = 0; i < numList.length; i++){
            res += numList[i];
        }
        callback.call(this, res);
    }
};

可以如下调用Service

window.Service.add([1,2], function(res){
    console.log(res);
});

window.Service.add([1,2,4], function(res){
    console.log(res);
});

基于上面逻辑，可以简单构造一个Proxy

window.Proxyer = {
    queue: [], // 消息队列
    isRun: false, // 判断是否已经在嗅探的标识
    add: function(numList, callback) {
        this.queue.push({ // 方法添加到队列里面
            numList: numList,
            callback: callback
        });
        if(!this.isRun) { // 防止反复启动嗅探
            this.loopSmell();
        }
    },
    loopSmell: function(){
        var _this = this;
        setTimeout(function(){
            if(!window.Service.load) {
                _this.isRun = true;
                _this.loopSmell();
            }else{
                while(_this.queue.length) { // 处理消息
                    var msg = _this.queue.shift();
                    window.Service.add(msg.numList, msg.callback);
                }
                _this.isRun = false;
            }
        }, 0);
    }
};

上面的Proxy不完美，只简单做了针对Service 且针对add方法的消息推送。

那么Servie就可以直接调用，不需要关心Servie是否加载。

window.Proxyer.add([1,2,5,5,5], function(res){
    console.log(res);
});

window.Proxyer.add([1,2,4,5,5,5,5], function(res){
    console.log(res);
});