jQuery源码分析之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 当作一个数组,this[0] = DOMElement 。其实,这要从 jQuery 的基本构造讲起,我们完成一个 $('div.span') 之后,然后一个 jQuery 对象(this),其中会得到一组(一个)DOM 对象,jQuery 会把这组 DOM 对象当作数组元素添加过来,并给一个 length。后面就像一些链式函数操作的时候,若只能对一个 DOM 操作,比如 width、height,就只对第一个元素操作,若可以对多个 DOM 操作,则会对所有 DOM 进行操作,比如 css()。

jQuery 大题思路如下,这是一个非常简单点实现:

jQuery.prototype = { // 简单点,假设此时 selector 用 querySelectorAll init: function(selector){ var ele = document.querySelectorAll(selector); // 把 this 当作数组,每一项都是 DOM 对象 for(var i = 0; i < ele.length; i++){ this[i] = ele[i]; } this.length = ele.length; return this; }, //css 若只有一个对象,则取其第一个 DOM 对象 //若 css 有两个参数,则对每一个 DOM 对象都设置 css css : function(attr,val){ for(var i = 0; i < this.length; i++){ if(val == undefined){ if(typeof attr === 'object'){ for(var key in attr){ this.css(key, attr[key]); } }else if(typeof attr === 'string'){ return getComputedStyle(this[i])[attr]; } }else{ this[i].style[attr] = val; } } }, }

所以对于 DOMElement 的处理,直接将 DOM 赋值给数组后,return this。

jQuery.makeArray 是一个绑定 数组的函数,和上面的原理一样,后面会谈到。

在介绍下面的内容之前,先来介绍一个 jQuery 中一个识别 Html 字符串的正则表达式,

var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/; rquickExpr.exec('<div>') //["<div>", "<div>", undefined] rquickExpr.exec('<div></div>') //["<div></div>", "<div></div>", undefined] rquickExpr.exec('#id') //["#id", undefined, "id"] rquickExpr.exec('.class') //null

上面这一系列的正则表达式 exec,只是为了说明 rquickExpr 这个正则表达式执行后的结果,首先,如果匹配到,结果数组的长度是 3,如果匹配到 <div> 这种 html,数组的第三个元素是 underfined,如果匹配到 #id,数组的第二个元素是 underfined,如果匹配不到,则为 null。

另外还有一个正则表达式:

var rsingleTag = ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i ); rsingleTag.test('<div></div>') //true rsingleTag.test('<div ></div>') //true rsingleTag.test('<div></div>') //false rsingleTag.test('<div></ddiv>') //false

这个正则表达式主要是对 html 的字符串进行验证,达到不出差错的效果。在这里不多介绍 exec 和正则表达式了。

下面来看下重点的处理 HTMl 字符串的情况:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwggsw.html