初学javascript设计模式(二)桥接模式第二遍遍阅读

来源:互联网 发布:越南芽庄网络怎么样 编辑:程序博客网 时间:2024/06/05 10:37
/* 桥接多个方法桥接模式,顾名思义就是搭桥连接多个模块下面的代码,有那么一点桥接思想首先是一个简陋的队列,下面简称q这个队列体现了先进先出接着是一个普通的函数和这个函数对应的回调,下面简称fc最后是个桥接函数,主要是想体现q与fc之间的衔接fc有可能是在初始化的时候执行,也可能单机任意按钮时执行而q有个先进先出的规则我们需求在初始化的时候根据某个规律进行初始化那么我们就用桥接函数桥接q与fc这个例子因为是体现2个类之间的桥接 所以最最下面的事件调用木有使用上面的桥接例子的写法在书中有句话:如果桥接函数被用于桥接2个类,而其中一个类只有在桥接函数里面被使用,那么我们可以放心的删除桥接函数,直接调用*//* 一个简陋的队列 */var Queue = function() {    var _queue = [];    var _op = function() {/* 按队列先入先出的顺序执行队列内部函数 */        var that = this;        var _i = setInterval(function() {            if (that.Queue.length > 0 && !that.stop) {                var obj = that.Queue.shift()                obj["fn"]();                if (obj["callBack"]) {                    obj["callBack"]()                }            }            else {                clearInterval(_i);            }        }, this.setTiemout);    }    var ret = {        Queue: _queue, /* 队列 */        setTiemout: 0, /* 执行间隔 */        add: function(fn, callBack) {/* 添加队列 */            this.Queue.push({ fn: fn, callBack: callBack });            return this;        },        clear: function() {/* 清空队列 */            this.Queue = [];            return this;        },        stop: false,        start: function() {/* 队列任务开始按钮 */            this.stop = false;            if (this.setTiemout > 0) {                _op.apply(this);            }            return this;        }    }    return ret;};var obj = $("#n");/* 函数 */var execute = function(i) {    obj.append("正在执行第" + i + "个函数...<br/>");};/* 函数回调 */var callBack = function(i, tiem) {    setTimeout(function() {        obj.append("第" + i + "个函数执行完毕!<br/>")    }, tiem)};var Bridge = function() {    /* 实例化一个队列 */    var q = new Queue();    q.setTiemout = 1000    q.add(function() {        execute(1);    }, function() {        callBack(1, 3000);    })    .add(function() {        execute(2);    }, function() {        callBack(2, 800);    })    .add(function() {        execute(3);    }, function() {        callBack(3, 2000);    })    .add(function() {        execute(4);    }, function() {        callBack(4, 100);    })    .start();    return q;} ();$("#stop").click(function() {    Bridge.stop = true;})$("#Go").click(function() {    Bridge.start();})$("#sj").click(function() {    execute(parseInt(Math.random() * 999));})/*************************************************************/

有不正确的地方希望指正