jQuery源码分析－分析碎片－init解读

发表于   |     |   阅读次数

前言

距离上一次写博客已经快4个月了，4个月快也慢，转眼间自己便毕业离开学校由一名学生成为一名上班狗。想起6月初答辩时的紧张不安，别离时的万分不舍，一切仿佛就在眼前…

😄，好像跑偏了，哈哈哈！今天想开始写关于jQuery源码解读的系列博客，jQuery是前端开发人员使用非常广的类库之一，帮助我们解决了许多现实问题，希望通过查看jQuery源码，学习其中的编程技巧，设计模式，以及前端开发中常见的知识点等等

分析碎片－init解读

jQuery使用起来非常的方便，和常见的js面相对象写法有些差异，我们可以通过$()函数调用的形式来创建一个jQuery实例，从而省去new 操作的麻烦。

为什么可以这样呢？ 老师告诉我们当你要创建对象的时候，请new 一个，现在不new为啥就可以创建对象了嘛，其实并不是没有new只是jQuery把这个操作放在了内部，请看…

1
2
3
4
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
  return new jQuery.fn.init( selector, context, rootjQuery );
}

可以看出，当我们在$()方法的时候，本质上通过jQuery.fn.init这个构造器创建了一个实例接下来，我们开始一步步看jQuery.fn.init这个构造器都做了一些什么事

$() 的常见用法

关于jQuery $()的常见用法欢迎查看$()的七种常见用法

其中最常用的方式是给$()传进去一个字符串和执行上下文，也就是 jQuery(selector,context)

1
2
3
4
5
6
var match, elem;
	// HANDLE: $(""), $(null), $(undefined), $(false)
	if ( !selector ) {
		return this;
	}

init方法中一开始便将传进来的selector进行了一层判断，当selector为

  • 空字符串
  • null
  • undefined
  • false

在js中表示为假操作的时候，便直接返回一个jQuery实例，只不过该实例与一般的jQuery对象有些不同，该实例没有0，1，2…引用着某个dom的属性也没有表示长度的length属性等

紧接着

1
2
3
4
5
6
7
if ( typeof selector === "string" ) {
	// ...
} else if (selector.nodeType) {
 	// ...
} else if (jQuery.isFunction( selector )) {
	// ...
}

对传进来的selector又进行了多层if else if判断，我们先看第一个typeof selector === "string"

日常在用jQuery的时候，当传进去的selector是字符串的时候我们可能会涉及到以下用法

选择元素的常见用法

1
2
3
4
5
6
7
8
9
10
11
12
$('#div1') 
$('.box') 
$('div')  
$('#div1 div.box')
```  
`创建元素的常见用法`
``` javascript
$('<li>')  
$('<li>1</li><li>2</li>')

在进入selctor已经是string判断的时候，接下来jQuery将

1
2
3
4
5
6
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
	// Assume that strings that start and end with <> are HTML and skip the regex check
	match = [ null, selector, null ];
} else {
	match = rquickExpr.exec( selector );	
}
1
2
$('<div>')
$('<li>1</li><li>2</li>')

符合以上selector场景的match置成了一个数组match = [ null, selector, null ];

而将符合以下参数条件的

1
2
3
4
5
$('#div1') 
$('.box') 
$('div') 
$('#div1 div.box')
$('<div>test')

通过正则匹配将