jQuery源码分析之init的详细介绍

2020-05-23 06:16:37易采站长站整理

init 构造器

由于这个函数直接和

jQuery() 
的参数有关,先来说下能接受什么样的参数。

源码中接受 3 个参数:


init: function (selector, context, root) {
...
}

jQuery()
,空参数,这个会直接返回一个空的 jQuery 对象,return this。
jQuery( selector [, context ] ) 
,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .class 等,context 表示选择范围,即限定作用,可为 DOM,jQuery 对象。
jQuery( element|elements ) 
,用于将一个 DOM 对象或 DOM 数组封装成 jQuery 对象。
jQuery( jQuery object|object ) 
,会把普通的对象或 jQuery 对象包装在 jQuery 对象中。
jQuery( html [, ownerDocument ] )
,这个方法用于将 html 字符串先转成 DOM 对象后在生成 jQuery 对象。
jQuery( html, attributes ) 
,和上一个方法一样,不过会将 attributes 中的方法和属性绑定到生成的 html DOM 中,比如 class 等。
jQuery( callback ) 
,此方法接受一个回掉函数,相当于 window.onload 方法,只是相对于。

介绍完入口,就开始来看源码。


init: function (selector, context, root) {
var match, elem;

// 处理: $(""), $(null), $(undefined), $(false)
if (!selector) {
return this;
}
// rootjQuery = jQuery( document );
root = root || rootjQuery;

// 处理 HTML 字符串情况,包括 $("<div>")、$("#id")、$(".class")
if (typeof selector === "string") {

//此部分拆分,留在后面讲

// HANDLE: $(DOMElement)
} else if (selector.nodeType) {
this[0] = selector;
this.length = 1;
return this;

// HANDLE: $(function)
} else if (jQuery.isFunction(selector)) {
return root.ready !== undefined ? root.ready(selector) :

// Execute immediately if ready is not present
selector(jQuery);
}

return jQuery.makeArray(selector, this);
}

上面有几点需要注意,

root = root || rootjQuery;
,这个参数在前面介绍用法的时候,就没有提及,这个表示 document,默认的话是 rootjQuery,而
rootjQuery = jQuery( document )

可以看出,对于处理

$(DOMElement)
,直接是把 jQuery 当作一个数组,