Introduction to jQuery framework_jquery

I have been using jQuery for a while, but there are some API implementations that I really can’t figure out. The editor refers to the relevant source code and now shares my learning process and gains with everyone.

The following will be introduced using simplified code, focusing on the implementation ideas of jQuery~>_<~

//匿名立即执行函数
//.防止污染全局空间
//.选择性保护内部变量
(function(window, undefined){
//第二参数undefined设置而不传的原因：
// 外部发生这种情况:var undefined = 时，undefined会被篡改
// 设置第二参数而不传，则undefined就会被重置回原来值
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window); 

--------------------------

jQuery initially wraps its internals with an anonymous immediate execution function and exposes it to the outside world on line 5;

The so-called anonymous immediate execution function means that this function is anonymous (without a name) and is called immediately after being defined;

When we call $("div") externally, we actually call the internal jQuery("div");

(function(window, undefined){
//内部变量
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);
$("div")

--------------------------

Okay, let’s get a little more complicated. The following code mainly implements mutual references as shown in the figure:

Take the $('div') call as an example:

As can be seen from the second line of code, jQuery uses jQuery.prototype.init to instantiate jQuery objects, but this will cause a problem:

The instantiated object can only access the variables under init, but not jQuery.prototype (the API provided by jQuery is bound to this object).

So, just write the 21st line of code and point init.prototype to jQuery.prototype.

This is done, use init to instantiate, and jQuery.prototype can be accessed under the init scope.

function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype; 

Why use jQuery.prototype.init to instantiate objects instead of using jQuery functions directly?

Assume that jQuery functions are used to instantiate objects, so that references between objects can indeed be simplified to jQuery-->jQuery.prototype.

But the call will become cumbersome: new $('div'), so based on this consideration (guess (⊙0⊙)), a more complex implementation is used internally to simplify the call.

--------------------------

Okay, finally, let’s take a look at the implementation of init. The code is also simplified, and only the most commonly used case is implemented.

jQuery will process the obtained nodeList into an array (for convenience of subsequent use), and mount some variables under it, such as length and selector.

init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
} 

This article ends here. The next article will introduce to you A brief analysis of jQuery chain calls and show knowledge. For more information, please pay attention to the Script House website!