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

init 构造器

由于这个函数直接和 jQuery() 的参数有关，先来说下能接受什么样的参数。

源码中接受 3 个参数：

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

1. jQuery() ，空参数，这个会直接返回一个空的 jQuery 对象，return this。
2. jQuery( selector [, context ] ) ，这是一个标准且常用法，selector 表示一个 css 选择器，这个选择器通常是一个字符串，#id 或者 .class 等，context 表示选择范围，即限定作用，可为 DOM，jQuery 对象。
3. jQuery( element|elements ) ，用于将一个 DOM 对象或 DOM 数组封装成 jQuery 对象。
4. jQuery( jQuery object|object ) ，会把普通的对象或 jQuery 对象包装在 jQuery 对象中。
5. jQuery( html [, ownerDocument ] ) ，这个方法用于将 html 字符串先转成 DOM 对象后在生成 jQuery 对象。
6. jQuery( html, attributes ) ，和上一个方法一样，不过会将 attributes 中的方法和属性绑定到生成的 html DOM 中，比如 class 等。
7. 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 class="cl"></div>') //false
rsingleTag.test('<div></ddiv>') //false

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

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

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);
}

buildFragment 函数主要是用来建立一个包含子节点的 fragment 对象，用于频发操作的添加删除节点。parsed = buildFragment([data], context, scripts);建立好一个 fragment 对象，用 parsed.childNodes 来获取这些 data 对应的 HTML。

jQueyr.makeArray

jQuery 里面的函数调用，真的是一层接一层，虽然有时候光靠函数名，就能知道这函数的作用，但其中思考之逻辑还是挺参考意义的。

jQuery.makeArray = function (arr, results) {
 var ret = results || [];

 if (arr != null) {
 if (isArrayLike(Object(arr))) {
 jQuery.merge(ret, typeof arr === "string" ? [arr] : arr);
 } else {
 push.call(ret, arr);
 }
 }

 return ret;
}

makeArray 把左边的数组或字符串并入到右边的数组或一个新数组，其中又间接的引用 jQuery.merge 函数。

接下来是着 isArrayLike 函数，可能需要考虑多方面的因素，比如兼容浏览器等，就有了下面这一长串：

function isArrayLike(obj) {

 // Support: real iOS 8.2 only (not reproducible in simulator)
 // `in` check used to prevent JIT error (gh-2145)
 // hasOwn isn't used here due to false negatives
 // regarding Nodelist length in IE
 var length = !!obj && "length" in obj && obj.length,
 type = jQuery.type(obj);

 if (type === "function" || jQuery.isWindow(obj)) {
 return false;
 }

 return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj;
}

总结

这篇文章主要介绍了jQuery中比较重要的入口函数，之后将会继续讲解 Sizzle，jQuery 中的选择器。感兴趣的朋友们请继续关注，谢谢大家的支持。

# jquery  # init  # jquery.fn.init  # init方法  # jQuery学习笔记之jQuery.fn.init()的参数分析  # jQuery构造函数init参数分析  # jQuery.prototype.init选择器构造函数源码思路分析  # jQuery构造函数init参数分析续  # 是一个  # 第一个  # 选择器  # 正则表达式  # 这一  # 这是一个  # 第二个  # 链式  # 会把  # 第三个  # 建立一个  # 以对  # 绑定  # 转成  # 的是  # 都是  # 这是  # 简单点  # 在这里  # 就像 

相关文章： c++怎么用jemalloc c++替换默认内存分配器【性能】  如何高效完成自助建站业务培训？  高防服务器租用首荐平台，企业级优惠套餐快速部署  如何制作算命网站,怎么注册算命网站？  广东企业建站网站优化与SEO营销核心策略指南  佛山网站制作系统,佛山企业变更地址网上办理步骤？  如何配置WinSCP新建站点的密钥验证步骤？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  制作国外网站的软件,国外有哪些比较优质的网站推荐？  建站之星官网登录失败？如何快速解决？  定制建站哪家更专业可靠？推荐榜单揭晓  英语简历制作免费网站推荐,如何将简历翻译成英文？  如何配置支付宝与微信支付功能？  青岛网站建设如何选择本地服务器？  制作旅游网站html,怎样注册旅游网站？  常州自助建站工具推荐：低成本搭建与模板选择技巧  外贸公司网站制作,外贸网站建设一般有哪些步骤？  如何通过服务器快速搭建网站？完整步骤解析  建站之星安装需要哪些步骤及注意事项？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  学校为何禁止电信移动建设网站？  平台云上自助建站如何快速打造专业网站？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  如何通过云梦建站系统实现SEO快速优化？  微信小程序 五星评分(包括半颗星评分)实例代码  高防服务器如何保障网站安全无虞？  如何选择最佳自助建站系统？快速指南解析优劣  建站主机无法访问？如何排查域名与服务器问题  建站主机如何选？性能与价格怎样平衡？  自助网站制作软件,个人如何自助建网站？  建站之星好吗？新手能否轻松上手建站？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  如何用PHP快速搭建CMS系统？  购物网站制作公司有哪些,哪个购物网站比较好？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  建站10G流量真的够用吗？如何应对访问高峰？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  建站主机选虚拟主机还是云服务器更好？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  如何用搬瓦工VPS快速搭建个人网站？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  javascript中对象的定义、使用以及对象和原型链操作小结  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  如何配置FTP站点权限与安全设置？  如何通过WDCP绑定主域名及创建子域名站点？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  实现虚拟支付需哪些建站技术支撑？  如何通过二级域名建站提升品牌影响力？  广州顶尖建站服务：企业官网建设与SEO优化一体化方案  如何确认建站备案号应放置的具体位置？