Introduction au framework jQuery_jquery

J'utilise jQuery depuis un certain temps, mais il y a certaines implémentations d'API que je n'arrive vraiment pas à comprendre. L'éditeur fait référence au code source concerné et partage désormais mon processus d'apprentissage et mes gains avec tout le monde.

Ce qui suit sera introduit à l'aide d'un code simplifié, en se concentrant sur les idées d'implémentation de 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 enveloppe initialement ses éléments internes avec une fonction d'exécution immédiate anonyme et les expose au monde extérieur sur la ligne 5
 ;

La fonction dite d'exécution immédiate anonyme signifie que cette fonction est anonyme (sans nom) et est appelée immédiatement après avoir été définie

Lorsque nous appelons $("div") en externe, nous appelons en fait le jQuery("div");

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

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

D'accord, soyons un peu plus compliqués. Le code suivant implémente principalement les références mutuelles comme le montre la figure :

Prenons l'appel $('div') comme exemple :

Comme le montre la deuxième ligne de code, jQuery utilise jQuery.prototype.init pour instancier des objets jQuery, mais cela posera un problème :

L'objet instancié ne peut accéder qu'aux variables sous init, mais pas à jQuery.prototype (l'API fournie par jQuery est liée à cet objet).

Alors, écrivez simplement la 21ème ligne de code et pointez init.prototype vers jQuery.prototype.

Ceci est fait, utilisez init pour instancier, et jQuery.prototype est accessible sous la portée init.

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; 

Pourquoi utiliser jQuery.prototype.init pour instancier des objets au lieu d'utiliser directement les fonctions jQuery ?

Supposons que les fonctions jQuery soient utilisées pour instancier des objets, de sorte que les références entre objets puissent effectivement être simplifiées en jQuery-->jQuery.prototype.

Mais l'appel deviendra fastidieux : new $('div'), donc sur la base de cette considération (devinez (⊙0⊙)), une implémentation plus complexe est utilisée en interne pour simplifier l'appel.

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

D'accord, enfin, jetons un coup d'œil à l'implémentation d'init. Le code est également simplifié et seul le cas le plus couramment utilisé est implémenté.

jQuery traitera la nodeList obtenue dans un tableau (pour une utilisation ultérieure) et montera certaines variables en dessous, telles que la longueur et le sélecteur.

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

Cet article se termine ici. L'article suivant vous présentera Une brève analyse des appels de chaîne jQuery et des connaissances Pour plus d'informations, veuillez faire attention au site Web de Script House !