jQuery的init都做了些什么

// 初始化jQuery对象，即jQuery.fn.init对象
// @param selector 选择器，可能是DOM对象、html字符串、jQuery对象、函数或其他任意值。
// @param context 选择器选择的范围
// @param rootjQuery == $(document);
init: function( selector, context, rootjQuery ) {
　　var match, elem;

　　//如果selector是""、null、undefined、false，则返回this，这里的this指针指向init对象
　　//如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将被绑定到那个新对象上。
　　if ( !selector ) {
　　　　return this;
　　}

　　// 如果selector 是String类型，走该分支进行处理
　　if ( typeof selector === "string" ) {

　　　　// 如果selector的第一个字符是“<”并且最后一个字符是">"，并且长度大于3
　　　　if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {

　　　　　　// 将html储存入match数组中，并与另一个分支中的正则捕获相对应
　　　　　　// 如果走这个分支则说明选择器为<a>这种形式，则跳过使用正则匹配，不全都使用正则匹配的原因是，可能返回空。
　　　　　　match = [ null, selector, null ];

　　　　} else {

　　　　// rquickExpr 是在闭包中定义的局部变量，匹配得到的数组类似于：[全匹配, <tag>, #id]

　　　　match = rquickExpr.exec( selector );
　　}

　　// 如果match不为空，并且match[1]也就是<tag>存在或者context不存在??
　　if ( match && (match[1] || !context) ) {

　　　　// 如果是<tag>的形式
　　　　if ( match[1] ) {
　　　　　　// 如果context是jQuery对象，则取其中的第一个DOM元素作为context
　　　　　　context = context instanceof jQuery ? context[0] : context;

　　　　　　// 将通过parseHTML处理生成的DOM对象merge进jQuery对象
　　　　　　jQuery.merge( this, jQuery.parseHTML(
　　　　　　　　match[1],
　　　　　　　　//如果context存在并且是note节点，则context就是的顶级节点或自身，否则content=document
　　　　　　　　context && context.nodeType ? context.ownerDocument || context : document,
　　　　　　　　true
　　　　　　) );

　　　　　　// isPlainObject DOM节点和window不是纯对象
　　　　　　// rsingleTag 匹配一个独立的标签，例如<div></div> 或者 <div>

　　　　　　// 这个分支没读懂
　　　　　　if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
　　　　　　　　for ( match in context ) {
　　　　　　　　　　if ( jQuery.isFunction( this[ match ] ) ) {
　　　　　　　　　　　　this[ match ]( context[ match ] );
　　　　　　　　　　} else {
　　　　　　　　　　　　this.attr( match, context[ match ] );
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　　　return this;

　　　　//如果是#id的形式，走这个分支进行处理
　　　　} else {
　　　　　　//通过getEle方法获得DOM对象将match[2]传入，是因为#id的形式是在第二个捕获组里面储存的。
　　　　　　elem = document.getElementById( match[2] );

　　　　　　// 如果该id元素存在并且该元素有父节点（判断父节点的原因是？？）
　　　　　　if ( elem && elem.parentNode ) {

　　　　　　　　// 将该元素保存进jQuery对象数组当中，并设置其length值为1
　　　　　　　　this.length = 1;
　　　　　　　　this[0] = elem;
　　　　　　}

　　　　　　// 将jQuery的context属性设置为document，selector属性设置为selector
　　　　　　this.context = document;
　　　　　　this.selector = selector;

　　　　　　// 返回生成的jQuery对象
　　　　　　return this;
　　　　}

　　//如果context不存在或者context是jQuery对象 //通过检测是不是有jquery属性
　　} else if ( !context || context.jquery ) {

　　　　// 进入Sizzle进行处理（复杂的选择器）
　　　　return ( context || rootjQuery ).find( selector );

　　//context存在并且context不是jQuery对象的情况先调用$(context)，在进入Sizzle进行处理
　　} else {
　　　　return this.constructor( context ).find( selector );
　　}

　　//如果selector不是String，是DOM元素
　　} else if ( selector.nodeType ) {
　　　　//直接将DOM元素存入jQuery对象并设置context和length
　　　　this.context = this[0] = selector;
　　　　this.length = 1;
　　　　return this;

　　//此分支是为了简化$(document).ready(function(){});
　　} else if ( jQuery.isFunction( selector ) ) {
　　　　return rootjQuery.ready( selector );
　　}

　　//此处为什么不走else if？而是单独判断？
　　//如果selector是jQuery对象，则设置新jQuery对象的selector和context和原对象的一致。
　　if ( selector.selector !== undefined ) {
　　　　this.selector = selector.selector;
　　　　this.context = selector.context;
　　}

　　//为最后一个if返回值。
　　return jQuery.makeArray( selector, this );
},

巴特西

jQuery的init都做了些什么

最新文章

热门文章