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

if (selector[0] === "<" && selector[selector.length - 1] === ">" && selector.length >= 3) { // 这个其实是强行构造了匹配 html 的情况的数组 match = [null, selector, null]; } else { match = rquickExpr.exec(selector); } // macth[1] 限定了 html,!context 对 #id 处理 if (match && (match[1] || !context)) { // HANDLE: $(html) -> $(array) if (match[1]) { //排除 context 是 jQuery 对象情况 context = context instanceof jQuery ? context[0] : context; // jQuery.merge 是专门针对 jQuery 合并数组的方法 // jQuery.parseHTML 是针对 html 字符串转换成 DOM 对象 jQuery.merge(this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true)); // HANDLE: $(html, props) if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { for (match in context) { // 此时的 match 非彼时的 match if (jQuery.isFunction(this[match])) { this[match](context[match]); // ...and otherwise set as attributes } else { this.attr(match, context[match]); } } } return this; // 处理 match(1) 为 underfined 但 !context 的情况 } else { elem = document.getElementById(match[2]); if (elem) { // this[0] 返回一个标准的 jQuery 对象 this[0] = elem; this.length = 1; } return this; } // 处理一般的情况,find 实际上上 Sizzle,jQuery 已经将其包括进来,下章详细介绍 // jQuery.find() 为 jQuery 的选择器,性能良好 } else if (!context || context.jquery) { return (context || root).find(selector); // 处理 !context 情况 } else { // 这里 constructor 其实是 指向 jQuery 的 return this.constructor(context).find(selector); }

关于 nodeType,这是 DOM 的一个属性,详情 Node.nodeType MDN。nodeType 的值一般是一个数字,比如 1 表示 DOM,3 表示文字等,也可以用这个值是否存在来判断 DOM 元素,比如 context.nodeType。

整个 init 函数等构造逻辑,非常清晰,比如 (selector, context, root) 三个参数,分别表示选择的内容,可能存在的的限制对象或 Object,而 root 则默认的 jQuery(document) 。依旧采用 jQuery 常用的方式,对每一个变量的处理都非常的谨慎。

如果仔细看上面两部分源代码,我自己也加了注释,应该可以把整个过程给弄懂。

find 函数实际上是 Sizzle,已经单独出来一个项目,被在 jQuery 中直接使用,将在下章介绍 jQuery 中的 Sizzle 选择器。通过源码,可以发现:

jQuery.find = function Sizzle(){...} jQuery.fn.find = function(selector){ ... //引用 jQuery.find jQuery.find() ... }

衍生的函数

init 函数仍然调用了不少 jQuery 或 jQuery.fn 的函数,下面来逐个分析。

jQuery.merge

这个函数通过名字,就知道它是用来干什么的,合并。

jQuery.merge = function (first, second) { var len = +second.length, j = 0, i = first.length; for (; j < len; j++) { first[i++] = second[j]; } first.length = i; return first; }

这样子就可以对类似于数组且有 length 参数的类型进行合并,我感觉主要还是为了方便对 jQuery 对象的合并,因为 jQuery 对象就是有 length 的。

jQuery.parseHTML

这个函数也非常有意思,就是将一串 HTML 字符串转成 DOM 对象。

首先函数接受三个参数,第一个参数 data 即为 html 字符串,第二个参数是 document 对象,但要考虑到浏览器的兼容性,第三个参数 keepScripts 是为了删除节点里所有的 script tags,但在 parseHTML 里面没有体现,主要还是给 buildFragment 当作参数。

总之返回的对象,是一个 DOM 数组或空数组。

jQuery.parseHTML = function (data, context, keepScripts) { if (typeof data !== "string") { return []; } // 平移参数 if (typeof context === "boolean") { keepScripts = context; context = false; } var base, parsed, scripts; if (!context) { // 下面这段话的意思就是在 context 缺失的情况下,建立一个 document 对象 if (support.createHTMLDocument) { context = document.implementation.createHTMLDocument(""); base = context.createElement("base"); base.href = document.location.href; context.head.appendChild(base); } else { context = document; } } // 用来解析 parsed,比如对 "<div></div>" 的处理结果 parsed:["<div></div>", "div"] // parsed[1] = "div" parsed = rsingleTag.exec(data); scripts = !keepScripts && []; // Single tag if (parsed) { return [context.createElement(parsed[1])]; } // 见下方解释 parsed = buildFragment([data], context, scripts); if (scripts && scripts.length) { jQuery(scripts).remove(); } return jQuery.merge([], parsed.childNodes); }

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

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