`
zhouxianglh
  • 浏览: 267409 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery1.4.1 代码分析(3多库共存,数据缓存,队列控制)

阅读更多

jQuery 分析中出了很多疑问,都不能解决,代码能看懂,但搞不明白为什么那么使用.这是一件很头痛的事儿.

jQuery 是一个很好的js库,优秀的原因是因为它有个好的思想,而我却看不明白.

/*
 * jQuery1.4.1 代码分析 isw2 zhoux
 */
//多库共存,数据缓存,队列控制
(function( window, undefined ) {
	var jQuery = function( selector, context ) {
		_jQuery = window.jQuery,// 记录原始的jQuery对象用于多库共存
		_$ = window.$// 记录原始的$对象用于多库共存
	};
	// 多库共存
	// 括展jQuery 对象本身
	jQuery.extend({
		noConflict: function( deep ) {
			window.$ = _$;// $的控制权让渡给第一个实现它的那个库
			if ( deep ) {
				window.jQuery = _jQuery;// jQuery的控制权让渡给第一个实现它的那个库,这也是jQuery 多用jQuery 而不用$的原因
			}
			return jQuery;
		}
	});
	// 数据缓存
	// 括展jQuery 方法
	jQuery.fn.extend({
		data: function( key, value ) {
			if ( typeof key === "undefined" && this.length ) {// key 无值,通过length 判断数组
				return jQuery.data( this[0] );
			} else if ( typeof key === "object" ) {
				return this.each(function() {
					jQuery.data( this, key );
				});
			}
			var parts = key.split(".");
			parts[1] = parts[1] ? "." + parts[1] : "";
			if ( value === undefined ) {
				var data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);// ?为会么要triggerHandler?
				if ( data === undefined && this.length ) {
					data = jQuery.data( this[0], key );
				}
				return data === undefined && parts[1] ?
					this.data( parts[0] ) :
					data;
			} else {
				return this.trigger("setData" + parts[1] + "!", [parts[0], value]).each(function() {// 为什么要trigger setData?
					jQuery.data( this, key, value );
				});
			}
		},
		removeData: function( key ) {
			return this.each(function() {
				jQuery.removeData( this, key );
			});
		}
	});
	var expando = "jQuery" + now(), uuid = 0, windowData = {};// 初始化时expando获取唯一值,在jQuery
																// 中全局
	var emptyObject = {};
	function now() {
		return (new Date).getTime();
	}
	jQuery.extend({
		cache: {},
		expando:expando,
		noData: {// 不可存放数据的element 对象nodeName
			"embed": true,// 多媒体
			"object": true,
			"applet": true
		},
		data: function( elem, name, data ) {// 在元素上存放数据
			if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {// 检查节点是否可以存放Date
				return;
			}
			elem = elem == window ? windowData : elem;
			var id = elem[ expando ], cache = jQuery.cache, thisCache;
			if ( !name && !id ) {// name,elem.expando为空,用于jQuery.data(elem),且elem data == null情况
				return null;
			}
			if ( !id ) {// elem.expando 为空
				id = ++uuid;// id !=null 且唯一
			}
			if ( typeof name === "object" ) {
				elem[ expando ] = id;
				thisCache = cache[ id ] = jQuery.extend(true, {}, name);// ?
			} else if ( cache[ id ] ) {// 如果已有值
				thisCache = cache[ id ];// 此时cache[id]的值为thisCache
			} else if ( typeof data === "undefined" ) {
				thisCache = emptyObject;
			} else {
				thisCache = cache[ id ] = {};// 此时cache[id]的值为thisCache
			}
			if ( data !== undefined ) {// 防止一个undefined的值覆盖原有数据
				elem[ expando ] = id;
				thisCache[ name ] = data;// 即cache[id]=data
			}
			/*
			 * var value = $.cache; 
			 * for(var temp in value){ 
			 * for(var tempA in value[temp]){ 
			 * alert("$.cache["+tempA+"]:"+value[temp][tempA]);
			 *  } }
			 *  可以查看结果
			 */
			return typeof name === "string" ? thisCache[ name ] : thisCache;
		},
		removeData: function( elem, name ) {
			if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
				return;
			}
			elem = elem == window ? windowData : elem;
			var id = elem[ expando ], cache = jQuery.cache, thisCache = cache[ id ];
			if ( name ) {
				if ( thisCache ) {// 根据name 删除,否则删除expando
					delete thisCache[ name ];// delete
					if ( jQuery.isEmptyObject(thisCache) ) {//isEmptyObject 测试对象是否是空对象
						jQuery.removeData( elem );
					}
				}
			} else {// 通过delete 删除expando 如果不能则用removeAttribute(javascript 方法)操作
				try {
					delete elem[ expando ];
				} catch( e ) {
					if ( elem.removeAttribute ) {
						elem.removeAttribute( expando );
					}
				}
				delete cache[ id ];
			}
		}
	});
	//队列控制
	// 括展jQuery 对象本身
	jQuery.extend({
		queue: function( elem, type, data ) {
			if ( !elem ) {
				return;
			}
			type = (type || "fx") + "queue";
			var q = jQuery.data( elem, type );//调用jQuery.data()查询elem 上type 的数据
			if ( !data ) {
				return q || [];
			}
			if ( !q || jQuery.isArray(data) ) {
				q = jQuery.data( elem, type, jQuery.makeArray(data) );//调用jQuery.data(),存入data
			} else {
				q.push( data );
			}
			return q;
		},
		dequeue: function( elem, type ) {
			type = type || "fx";
			var queue = jQuery.queue( elem, type ), fn = queue.shift();
			if ( fn === "inprogress" ) {
				fn = queue.shift();
			}
			if ( fn ) {
				if ( type === "fx" ) {
					queue.unshift("inprogress");
				}
				fn.call(elem, function() {
					jQuery.dequeue(elem, type);
				});
			}
		}
	});
	// 括展jQuery 方法
	jQuery.fn.extend({
		queue: function( type, data ) {
			if ( typeof type !== "string" ) {
				data = type;
				type = "fx";
			}
			if ( data === undefined ) {
				return jQuery.queue( this[0], type );
			}
			return this.each(function( i, elem ) {
				var queue = jQuery.queue( this, type, data );

				if ( type === "fx" && queue[0] !== "inprogress" ) {
					jQuery.dequeue( this, type );
				}
			});
		},
		dequeue: function( type ) {
			return this.each(function() {
				jQuery.dequeue( this, type );
			});
		},
		clearQueue: function( type ) {
			return this.queue( type || "fx", [] );
		}
	});
	window.jQuery = window.$ = jQuery;
})
分享到:
评论

相关推荐

    jQuery1.4.1 小结

    同时,`queue()`和`.dequeue()`可以控制动画队列,实现更复杂的动画序列。 ### 6. Ajax交互 jQuery 的`$.ajax()`, `$.get()`, `$.post()`等方法简化了Ajax请求。`getJSON()`, `load()`等方法则专门用于获取JSON...

    JQuery1.4.1

    **jQuery 1.4.1 知识点详解** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery 1.4.1 版本是该库的一个重要里程碑,发布于2010年,它在前一版本的基础上...

    jQuery 1.4.1 中文版参考

    通过《jQuery 1.4.1 中文版参考》的详细学习,开发者能够掌握这个版本的jQuery核心功能,从而在实际项目中更灵活、高效地编写代码。而提供的`jQueryAPI-100203.chm`文件很可能是jQuery 1.4.1的API参考手册,包含了...

    jquery 1.4.1.js

    jquery 1.4.1jquery 1.4.1jquery 1.4.1jquery 1.4.1jquery 1.4.1

    jquery1.4.1使用手册

    《jQuery 1.4.1 使用手册》是前端开发者的重要参考资料,主要涵盖了jQuery库的各个方面,包括选择器、DOM操作、事件处理、效果动画、AJAX以及插件开发等内容。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    jQuery1.4.1 API 中文参考手册

    尽管现在jQuery已经更新至更高级版本,但1.4.1版本的手册对于理解早期jQuery的编程思想仍有很大价值,特别是对于初学者和需要维护旧代码的开发者来说。通过深入学习这个手册,你可以更好地理解jQuery的工作原理,...

    jQuery 1.4.1 中文参考

    在jQuery 1.4.1版本中,这个库提供了丰富的API,使得开发者能够更高效地编写JavaScript代码。 **核心功能** jQuery的核心在于选择、操作DOM元素以及处理事件。以下是一些关键的核心函数: - `jQuery(expression, ...

    JQuery1.4.1, UI ,JS ,中文API文档

    在jQuery 1.4.1中,开发者可以体验到更快的DOM选择器执行速度,更优化的代码结构以及对CSS3选择器的更好支持。此外,这个版本还修复了一些已知的bug,提升了整体的稳定性和兼容性。例如,对于跨浏览器的问题,jQuery...

    JQuery 1.4.1中文参考手册

    jquery 开发中文文档,供开发人员使用。。

    jquery1.4.1

    总结来说,jQuery 1.4.1虽然不是最新版本,但其基础功能强大,对于初学者或需要维护旧代码的开发者来说,仍然是一个可靠的学习和参考资料。通过深入理解和熟练运用jQuery,开发者可以提高网页开发效率,创建出更具...

    jquery1.4.1中文chm

    最新版的jquery1.4.1中文帮助。

    jQuery 1.4.1 API 中文参考手册.chm

    jQuery 1.4.1 API 中文参考手册.chm

    jquery1.4.1中文开发手册

    《jQuery 1.4.1 中文开发手册》是一份详尽的指南,旨在帮助开发者高效地利用jQuery这个JavaScript库进行网页动态效果的创建和Ajax交互。jQuery自诞生以来,因其简洁的语法和强大的功能,成为了JavaScript开发者的...

    jQuery 1.4.1 速查表 jQueryAPI

    **jQuery 1.4.1 速查表与jQuery API** jQuery 是一款高效、简洁的JavaScript库,它极大地简化了JavaScript编程,特别是DOM操作、事件处理、动画制作以及Ajax交互。jQuery 1.4.1 是该库的一个早期版本,尽管现在已经...

    JQuery 1.4.1开发包

    3. **Visual Studio文档支持**:`jquery-1.4.1-vsdoc.js`文件是专门为Visual Studio等IDE提供的文档支持文件。它包含了JQuery函数和方法的详细注释,方便在开发过程中提供Intellisense(智能感知)功能,即代码自动...

    jQuery1.4.1.chm

    《jQuery1.4.1.chm》是针对jQuery 1.4.1版本的一个中文API文档,它提供了全面且详尽的关于这个JavaScript库的使用指南。jQuery是一个强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax...

    JQuery1.4.1中文参考离线手册

    离线手册提供了完整的API文档,包括所有函数、参数和返回值的详细说明,这对于学习和调试jQuery代码非常有帮助。例如,你可以查阅 `$().fadeIn()` 的用法,了解其参数、返回值和可能的错误。 总之,jQuery 1.4.1...

    jQuery api 1.4.1

    jQuery API 1.4.1 是一个非常重要的版本,它为开发者提供了强大的工具,使得JavaScript编程更为便捷。在这个版本中,jQuery进一步优化了其核心功能,增强了性能,并引入了一些新的特性和方法。以下是对这个API的一些...

    jquery 1.4.1 vsdoc 简体中文

    3. `jquery-1.4.1.js`:这是未压缩的完整版jQuery 1.4.1,保留了原始的代码结构和注释,方便开发者查看和调试。 4. `jquery-1.4.1.min.js`:这是经过压缩和优化的版本,适合用于生产环境,减小了文件大小,提升了...

Global site tag (gtag.js) - Google Analytics