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')

通过正则匹配将