Tag Archive for 'jQuery'

事件委托在jQuery和KISSY内核中的应用

Published on 2011年07月11日 in Web开发 and 前端开发. 0 Comments Tags: , , .

一直觉得jQuery中的 .live() 方法很神奇，居然可以对动态加入的元素进行绑定。今天终于弄明白了，原来这是通过使用事件委托实现的。

   $('a').live('click', function(){
      //code block1
   })

上面的这段代码可以约等于（但不完全等于，总结中说明了为什么）：

   $(document).bind('click', function(e){
      if(e.srcElement.tagName == 'a'){
         //code block1
      }
   })

此外，jQuery还有一个 .delegate() 方法，可以实现接近 .live() 的效果：

   $('#container').delegate('a','click',function(){
      //code block2
   })

jQuery在文档中查找#container，并使用click事件和’a'这一CSS选择器作为参数，把函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行绑定的函数。
在KISSY 1.2版本中也引入了 .delegate() 方法。
这两种方法中，个人觉得还是 .delegate() 方法效率高。因为 .live() 方法需要把选择器匹配到的元素都包装成jQuery对象；而 .delegate() 方法只在委托的节点上监听冒泡事件。感觉用 .live() 方法进行事件委托比较鸡肋啊，可能这也是为什么其他js框架没有类似方法的原因吧。

Kissy中jsonp api的bug

Published on 2011年04月15日 in Web开发 and 前端开发. 0 Comments Tags: , , , .

在相邻的代码里多次调用Kissy的jsonp方法，调用十次大概会出现六次的：Uncaught ReferenceError: jsonp1302852733609 is not defined(anonymous function).同事仙羽查看源码发现，是kissy的jsonp api是调用太快了，产生了同一个时间戳。。两次请求返回的都是同个函数调用，但是kissy里面的jsonp有个垃圾收集的处理，结果把这个函数给删了，第二次再调用的时候就调用不到了。算是kissy的bug吧，应该用guid的。出错代码如下

for(var i=0;i<10;i++){
    KISSY.jsonp('http://110.75.14.39/home/recommendTmallSpu.htm?appID=87&num=4&key=110202',function(data){
        console.log(data);
    })
}

问题就出现在ajax模块下的这行代码：

jsonp = c['jsonpCallback'] || JSONP + S.now();

贴一段jQuery源码中的实现：

// 默认的发起jsonp请求的设置 即url中callback=?的情况 回调函数也是"jsonp_"+时间错
jQuery.ajaxSetup({
	jsonp: "callback",
	jsonpCallback: function() {
		return jQuery.expando + "_" + ( jsc++ );
	}
});

// 装载jsonp的callback函数
jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {

	var dataIsString = ( typeof s.data === "string" );

	if ( s.dataTypes[ 0 ] === "jsonp" ||
		originalSettings.jsonpCallback ||
		originalSettings.jsonp != null ||
		s.jsonp !== false && ( jsre.test( s.url ) ||
				dataIsString && jsre.test( s.data ) ) ) {
                //响应容器
		var responseContainer,
			jsonpCallback = s.jsonpCallback =
				jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback,
			previous = window[ jsonpCallback ],
			url = s.url,
			data = s.data,
			replace = "$1" + jsonpCallback + "$2",
			cleanUp = function() {
				window[ jsonpCallback ] = previous;
				// 当有请求时调用callback
				if ( responseContainer && jQuery.isFunction( previous ) ) {
					window[ jsonpCallback ]( responseContainer[ 0 ] );
				}
			};

		if ( s.jsonp !== false ) {
			url = url.replace( jsre, replace );
			if ( s.url === url ) {
				if ( dataIsString ) {
					data = data.replace( jsre, replace );
				}
				if ( s.data === data ) {
					// Add callback manually
					url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback;
				}
			}
		}

		s.url = url;
		s.data = data;

		// 装载callback
		window[ jsonpCallback ] = function( response ) {
			responseContainer = [ response ];
		};

		// Install cleanUp function
		jqXHR.then( cleanUp, cleanUp );