【代码片-2】 第二章 jQuery技术解密 (三)

浏览: 126 发布日期: 2016-12-01 分类: jquery
<script type="text/javascript">
(function(){
var 
	window = this,
	jQuery = window.jQuery = window.$ = function(selector, context){
		return new jQuery.fn.init(selector, context);
	},
	quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/;
	
// jQuery 原型对象
// 构造 jQuery 对象的入口
// 所有 jQuery 对象方法都通过 jQuery 原型对象来继承
jQuery.fn = jQuery.prototype = {
	// jQuery 对象初始化构造器,相当于 jQuery 对象的类型,由该函数负责创建 jQuery 对象
	// 参数说明:selector: 选择器的符号,可以是任意数据类型。考虑DOM元素操作需要,该参数应该是包含DOM元素的任何数据
	// context: 上下文,指定在文档DOM中哪个节点下开始进行查询,默认值为 document
	init: function(selector, context){
		selector = selector || document; // 确保 selector 参数存在,默认值为document
		// 第一种情况,处理选择符为 DOM 元素,此时将忽略上下文,即忽略第二个参数
		// 例如,$(document.getElementById("wrap")), jQuery(DOMElement) 匹配DOM元素。
		// 先使用 selector.nodeType 判断当 selector 为元素节点,将 length 设置为 1,
		// 并且赋值给 context ,实际上 context 作为 init 的第二个参数,
		// 也意味着它的上下文节点就是 selector 该点,返回它的 $(DOMElement) 对象
		if(selector.nodeType){  // 存在 nodeType 属性,说明选择符是一个 DOM 元素
			this[0] = selector; // 直接把当前参数的 DOM 元素存入类数组中
			this.length = 1;    // 设置类数组的长度,以方便遍历访问
			this.context = selector; // 设置上下文属性
			return this;  // 返回 jQuery 对象,即类数组对象
		}
		// 如果选择符参数为字符串,则进行处理
		// 例如,$("<div>hello,world</div>"), jQuery(html, [ownerDocument]) 匹配HTML字符串
		if(typeof selector == "string"){
			// 使用 quickExpr 正则表达式匹配该选择符字符串,决定是处理 HTML 字符串,还是处理 ID 字符串
			// quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/ 
			// quickExpr 匹配 包含 < > 的字符串 或 # 后跟 [a-zA-Z0-9_] 或 - 的字符串
			var match = quickExpr.exec(selector);
			// 验证匹配的信息,任何情况下都不是 #id
			if (match && (match[1] || !context)){
				// 第二种情况,处理 HTML 字符串,类似 $(html) -> $(array)
				if (match[1]){
					//selector = jQuery.clean( [ match[1] ], context );
				}
				// 第三种情况,处理 ID 字符串,类似 $("#id")
				else {
					var elem = document.getElementById(match[3]); // 获取该元素确保元素存在
					// 处理在 IE 和 Opera 浏览器下根据 name,而不是 ID 返回元素
					if(elem && elem.id != match[3]){
						//return jQuery().find( selector ); // 默认调用 document.find() 方法
					}
					// 否则将把 elem 作为元素参数直接调用 jQuery() 函数,返回 jQuery 对象
					var ret = jQuery( elem || [] );
					ret.context = document;  // 设置 jQuery 对象的上下文属性
					ret.selector = selector; // 设置 jQuery 对象的选择符属性
					return ret;
				}	
			}else{
				// 第四种情况,处理 jQuery(expression, [context])
				// 例如,$("div .red") 的表达式字符串
				//return jQuery(context).find(selector);
			}
		} //else if ( jQuery.isFunction( selector ) )
			// 第五种情况,处理 jQuery(callback),即 $(document).ready() 的简写
			// 例如,$(function(){alert("hello,world");}),
			// 或者 $(document).ready(function(){alert("hello,world");});
			// return jQuery( document ).ready( selector );
		// 确保旧的选择符能够通过
		if (selector.selector && selector.context){
			this.selector = selector.selector;
			this.context = selector.context;
		}
		// 第六种情况,处理类似 $(elements)
		//return this.setArray(jQuery.isArray(selector)? selector: jQuery.makeArray(selector));
	}
};

})();
</script>
返回顶部