技术开发 频道

jQuery:一次失败的优化尝试

  简单实现

  “事务”式的jQuery操作中,提供2个函数:

  1.begin:打开一个“事务”,返回一个事务的对象。该对象拥有jQuery的所有函数,但是调用函数并不会立刻生效,只有在“提交事务”后才会生效。

  2.commit:提交一个“事务”,保证所有事先调用过的函数都生效,交返回原本的jQuery对象。

  实现起来也很方便:

  1.创建一个“事务对象”,复制jQuery.fn上所有函数到该对象中。

  2.当调用某个函数时,在预先准备好的“队列”中添加调用的函数名和相关参数。

  3.当提交事务时,对被选择的元素进行一次遍历,对遍历中的每个节点应用“队列”中的所有函数。

  简单地代码如下:

var slice = Array.prototype.slice;
jQuery.fn.begin
= function() {
    var proxy
= {
            _core: c,
            _queue: []
        }
,
        key,
        func;
    
//复制jQuery.fn上的函数
    for (key in jQuery.fn) {
        func
= jQuery.fn[key];
        
if (typeof func == 'function') {
            
//这里会因为for循环产生key始终是最后一个循环值的问题
            
//因此必须使用一个闭包保证key的有效性(LIFT效应)
            (function(key) {
                proxy[key]
= function() {
                    
//将函数调用放到队列中
                    this._queue.push([key, slice.call(arguments, 0)]);
                    
return this;
                }
;
            }
)(key);
        }

    }

    
//避免commit函数也被拦截
    proxy.commit = jQuery.fn.commit;
    
return proxy;
}
;

jQuery.fn.commit
= function() {
    var core
= this._core,
        queue
= this._queue;
    
//仅一个each循环
    core.each(function() {
        var i
= 0,
            item,
            jq
= jQuery(this);
        
//调用所有函数
        for (; item = queue[i]; i++) {
            jq[item[
0]].apply(jq, item[1]);
        }

    }
);
    
return this.c;
}
;
0
相关文章