设计模式之代理模式与观察者模式

代理模式

代理模式-将操作交由代理来实现,代理上会有其他的处理,使之在适当的时候才去操作
虚拟代理-开销大之类的操作,用异步的方式(延迟)代理去实现

    //虚拟代理之延迟处理功能
    var getInput = function (type) {
        if(type === "all") return document.getElementsByTagName('input');
        if(typeof type === "number") return document.getElementsByTagName('input')[type-1];
        if(Object.prototype.toString.call(type) == '[object Array]'){
            var inputArr = [];
            for(var i in type){
                var input = document.getElementsByTagName('input')[type[i]-1];
                 input && inputArr.push(input);
            };
            return inputArr;
        };
        return false;
    };

    for(var inputI = 0;inputI<getInput("all").length;inputI++){
        getInput("all")[inputI].onclick= function(){
            if(this.checked === false) return;
            proxySend(this.value);
        };
    };
    // 代理发送,通过闭包保存需要发送的val
    // 2000ms没有再去点击checkbox才去发送
    var proxySend =(function(){
        var valArr = [];
        var time;
        return function(value){
            idArr.push(value);
            clearTimeout(time);
            time = setTimeout(function(){
                for(var i = 0;i<valArr.length;i++){
                    sendInput(valArr[i]);
                };
                valArr = [];
                time = null;
            },2000);
        };
    })();

    var sendInput = function(value){
        console.info(value+":发送");
    };  

缓存代理-代理中保存计算的值(花销大的计算结果),下一次先试着从缓存中调用

    var proxy = (function(){
        var cache = {};
        return function(){
            var args = Array.prototype.join.call( arguments, ',' );
            console.info(args); 
            if ( args in cache ){
                console.info(cache);    
                return cache[ args ];
            }
            return cache[ args ] = mult.apply( this, arguments );
        }
        })();

//通过*立即执行函数返回函数形成闭包,保存缓存cache,然后将*arguments拼接作为缓存对象的key,值为计算结果,通过*if(key in object)来得到重复的key

//高级函数与缓存代理
var createProxyFactory = function( fn ){
    var cache = {};
        return function(){
        var args = Array.prototype.join.call( arguments, ',' );
        if ( args in cache ){
        return cache[ args ];
        }
        return cache[ args ] = fn.apply( this, arguments );
        }
};
var proxyMult = createProxyFactory( mult ),
proxyPlus = createProxyFactory( plus );

alert ( proxyMult( 1, 2, 3, 4 ) ); 
alert ( proxyMult( 1, 2, 3, 4 ) ); 
alert ( proxyPlus( 1, 2, 3, 4 ) ); 
alert ( proxyPlus( 1, 2, 3, 4 ) ); 

不通过立即执行函数,而是调用函数来实现得到闭包,使不同的计算函数得到自己的缓存对象

观察者模式-订阅发布(自定义事件-触发)

订阅--将key作为标志位,将key发生时需要执行的函数保存
发布--通过key寻找函数,并执行

    var subPub = (function(){
        var listenList = {};
        //保存key:[fn1,fn2,fn3]
        
        var listen = function(key,fn){
            if(key in listenList){
                for(var i = 0 ;i<listenList[key].length ; i++){
                    if(listenList[key][i] == fn)return;
                }
            }else{
                listenList[key] = [];
            };
            listenList[key].push(fn);
        };
        // 判断key与fn情况,然后将函数push保存

        var trigger = function(){
            var key = [].shift.call(arguments);
            if(!listenList[key] || listenList[key].length == 0) return false;
            for(var i = 0 ; i<listenList[key].length ; i++){
                listenList[key][i].apply(this,arguments);
            }
        };
        //通过key得到需要执行的函数,然后将参数传入执行
        
        var remove = function(key,fn){
            if(!listenList[key] || listenList[key].length == 0) return false;
            if(!fn){listenList[key].length = 0;return}
            for(var i = 0 ; i<listenList[key].length ; i++){
                if(listenList[key][i] == fn){
                    listenList[key].splice(i,1);
                }
            }
        };

        return {
            remove:remove,
            trigger:trigger,
            listen:listen
        }
    })()

转载于:https://www.cnblogs.com/LiangHuang/p/6413914.html