从上面jQuery的主要结构我们可以看到，第一次执行后，全局变量$和jQuery都指向函数var jQuery = function(selector, context){}，这里，可以进行下一步推论，$是 jQuery 的另一个名字，它实际上调用了 jQuery.fn.init。
看一下构造函数var jQuery = function (selector, context) {}，为什么上面没有直接返回jQuery对象呢？ 但调用另一种方式？
如果直接返回对象，则每次使用jQuery对象时，都需要new jQuery()，非常不方便。 new操作直接封装在jQuery构造函数上，简化了实例化操作。 同时，jQuery通过 jQuery 或者$符号统一了socket，方便了代码的编译，简化了复杂度jquery 对象数组，提高了效率。
那么jQuery类具体是如何构造的呢？其实可以支持各种参数方法的调用
直接进入jQuery.fn.init这个“轴马”，jQuery真正的构造函数，我们就可以完全理解了
/*所有查找或生成元素的结果，封装为jQuery对象数组返回.
*/
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// 1)处理 $(""), $(null), or $(undefined)
//this指向jQuery对象
if ( !selector ) {
return this;
}
// 2)处理 $(DOMElement)
//selector.nodeType得知为DOM元素,如果是DOM元素直接放进jQuery对象数组中
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
//3)body元素只出现一次, 优化查找
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = "body";
this.length = 1;
return this;
}
//4)如果是字符串,有六种情况,
/*
*(1)单个html元素 不带属性对象字面量 ：createElement + merge
*(2)单个html元素 带属性对象字面量 ：createElement + attr + merge
*(3)多个html元素 ：buildFragment + merge
*(4)#id 不带context ：getElementById或者getElementById + Sizzle
*(5)#id 带context ：Sizzle
*(6)experession string ：Sizzle
*(7)标签选择器 ：Sizzle（内置getElementByTagName）
*/
if ( typeof selector === "string" ) {
// 判断是否为HTML string 还是 ID
//如果是HTML strings match[1] 非空
//如果是ID strings match[1] 空
//quickExpr = /^(?:[^<]*()[^>]*$|#([w-]+)$)/,
match = quickExpr.exec( selector );
// 分析匹配结果，且当#id没有context参数，例如不是$('#xxx',xxx)
if ( match && (match[1] || !context) ) {
// 处理HTML字符 $(html) -> $(array)
if ( match[1] ) {
//如果context为jQuery对象，则取用第一个元素，即是context[0]
context = context instanceof jQuery ? context[0] : context;
//取得document文档
doc = (context ? context.ownerDocument || context : document);
//判断是否为单个元素字符串
ret = rsingleTag.exec( selector );
//单个元素
if ( ret ) {
//带对象属性字面量
//检查context是否为对象字面量,适用场景
//例如$('', { 'id': 'test', 'class': 'test' });
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
} else {
//不带对象字面量
//例如$('')
selector = [ doc.createElement( ret[1] ) ];
}
} else {
//如果是多个元素字符串，例如$('')
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
}
//将生成结果selector 合并到jQuery对象中
return jQuery.merge( this, selector );
// 处理$("#id"),例如$("#xxx");
} else {
elem = document.getElementById( match[2] );
if ( elem && elem.parentNode ) {
//处理IE和Opera ID 与 Name 混淆的bug,使用Sizzle查找
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// 否则，简单插入jQuery对象数组
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
// 处理 $(expr, $(...))，使用Sizzle查找，例如$("div"),$('div > a'),$('div,a'),$('div:first')
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector );
// 处理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a');
} else {
return this.constructor( context ).find( selector );
}
//5)处理: $(function),设置DOM载的时候绑定的函数,等同于$().ready(){foo}
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
//6)处理：$($(...))，完成克隆jQuery对象的简单参数，具体由makeArray完成
if (selector.selector !== undefined) 完成加{
this.selector = selector.selector;
this.context = selector.context;
}
//使用makeArray，为jQuery对象添加元素,例如$([1,2]);
return jQuery.makeArray( selector, this );
},
从源码中可以看出，jQuery通过各种条件判断和强大的正则表达式来实现各种参数的调用。
总结
$ 符号实际上是对 jQuery 类构造函数的引用。 这个函数实际上调用了jQuery.fn.init（即jQuery.prototype.init）来生成一个jQuery对象，其中jQuery.prototype的所有方法都是由jQuery对象继承的。 $.func实际上是jQuery类的静态方法，所以$是jQuery类的构造函数，支持各种条件的搜索和生成，并返回一个DOM对象，形成一个jQuery对象。 它也是一个类，并且是所有 jQuery 静态方法的入口点。 例如，可以使用$.ajax()。
最后，为您提供一些资源，改进 jQuery 代码的 14 种方法
关于jQuery Sizzle选择器jquery 对象数组，感兴趣的朋友可以参考jQuery的Sizzle选择器初步探索
相关文章
发表评论