Une brève discussion sur les connaissances pertinentes des appels show et chain dans jQuery

Dans cet article, découvrons les appels show et chain dans jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

jQuery est utilisé depuis longtemps, mais l'implémentation de certaines API est vraiment difficile à comprendre. Ce qui suit sera introduit à l'aide d'un code simplifié, en se concentrant principalement sur les idées d'implémentation de jQuery.

(function(window, undefined){
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
},
show: function(){
Array.prototype.forEach.call(this, function(node){
//if(node.style) continue; //textnode没有style
//删除style上的display:none
var display = node.style.display;
if(display === 'none'){
//dispaly置为空后，css如果有display则css的生效
//否则默认的生效
node.style.display = '';
}
//元素display值为非默认值情况，需要还原为oldDisplay：div->display:inline-block
//或 检测css上的display是否为none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默认值或元素当前值
else node.style.display = getDisplay(node);
}
})
//链式调用
return this;
},
hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery使用其cache机制存储信息，这里简化一下
//直接挂载在对应的dom下
node.oldDisplay = getDisplay(node);
node.style.display = 'none';
}
})
return this;
}
}
function getDisplay(node){
var display = window.getComputedStyle(node, null).getPropertyValue('display');
if(display === 'none'){
var dom = document.createElement(node.nodeName);
//插入到body中
document.body.appendChild(dom);
//即可获取到元素display的默认值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}
function isHidden(node) {
//忽略未append进document的元素这种隐藏情况：$(&#39;<div>block</div>&#39;)未append
return window.getComputedStyle(node, null).getPropertyValue(&#39;display&#39;) === &#39;none&#39;;
}
jQuery.prototype.init.prototype = jQuery.prototype;
window.$ = jQuery;
})(window);

Premier échauffement avec la fonction masquer. Comme mentionné dans l'article précédent, jQuery traitera la nodeList obtenue dans un tableau, donc d'abord, nous utilisons forEach pour traiter chaque nœud du tableau.

Ensuite, il nous suffit de définir le style.display de chaque nœud sur « aucun » pour le masquer. Assez simple, non ? (⊙0⊙) . Ignorez oldDisplay et renvoyez ceci pour l'instant╰(￣▽￣)╮

hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery使用其cache机制存储信息，这里简化一下
//直接挂载在对应的dom下
node.oldDisplay = getDisplay(node);
node.style.display = 'none';
}
})
return this;
}

où isHidden est utilisé pour déterminer si l'élément est masqué : il n'est pas nécessaire de traiter les éléments déjà masqués, ignorez simplement

function isHidden(node) {
//忽略未append进document的元素这种隐藏情况：$(&#39;<div>block</div>&#39;)未append
return window.getComputedStyle(node, null).getPropertyValue(&#39;display&#39;) === &#39;none&#39;;
}

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

Ensuite, faisons un peu encombrant montrer. Posez d'abord une question pour déclencher une série de questions :

masquer un certain élément ne nécessite que display:none, mais qu'en est-il de show ?

Display:block n'est-il pas suffisant ? Cela montrera en effet l'élément. Mais que se passe-t-il si la valeur originale de l'élément est display:inline ?

Ne suffirait-il pas de sauvegarder la valeur d'origine dans hide ? Tout comme le code suivant :

node.oldDisplay = getDisplay(node);

Et si hide n'est pas exécuté avant l'exécution de show ? Par exemple, dans la situation suivante, n'y aurait-il pas d'oldDisplay ? (⊙0⊙)

<style>
div{ display:none; }
</style>
<div>display:none</div>$(&#39;div&#39;).show()

D'accord, le point clé est ici : on peut simplement récupérer la valeur par défaut de l'affichage de l'élément, droite? Par exemple, p est par défaut block et span par défaut, inline.

Maintenant que nous avons l'idée, la question suivante est : Comment obtenir la valeur par défaut de l'affichage des éléments ?

Hehehehe, tu n'y penses pas ? Une petite astuce s'impose ici, l'idée générale est la suivante : créer un nouveau label via nodeName, puis l'obtenir.

Il existe un endroit qui peut être encore optimisé. Une fois que getDisplay a obtenu la valeur d'affichage par défaut de l'élément, il peut être stocké à l'aide du mécanisme de cache de jQuery (en fait, jQuery le fait également).

function getDisplay(node){
var display = window.getComputedStyle(node, null).getPropertyValue('display');
if(display === 'none'){
var dom = document.createElement(node.nodeName);
//插入到body中
document.body.appendChild(dom);
//即可获取到元素display的默认值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}

Ensuite, en combinant ces deux situations :

//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默认值或元素当前值
else node.style.display = getDisplay(node);

Vous pensez que c'est la fin ? NON, la situation de la fonction show est assez compliquée. Nous devons généralement faire face à ces situations :

<style>
#none,#none2{ display: none; }
</style>
<body>
<div id="div">默认值为block</div>
<span id="span">默认值为inline</span>
<div id="div2" style="display:inline-block;">修改为inline-block</div>
<div id="none">通过css隐藏了</div>
<div id="none2" style="display:none">通过css和style隐藏了</div>
</body>

Au final, la fonction show s'est transformée en cet étrange ψ(╰_╯). L'idée générale est la suivante :

show: function(){
Array.prototype.forEach.call(this, function(node){
//if(node.style) continue; //textnode没有style
//删除style上的display:none
var display = node.style.display;
if(display === 'none'){
//dispaly置为空后，css如果有display则css的生效
//否则默认的生效
node.style.display = '';
}
//元素display值为非默认值情况，需要还原为oldDisplay：div->display:inline-block
//或 检测css上的display是否为none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默认值或当前值
else node.style.display = getDisplay(node);
}
})
}

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

L'appel en chaîne est similaire à cette situation :

$('div').show().hide().css('height','300px').toggle()

est très simple à mettre en œuvre, du moment que chaque fonction Renvoyez-le plus tard

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

Oui Le camarade de classe a dit : Bonjour ! N'est-ce pas montrer et cacher, n'est-ce pas ? Ai-je raté le paramètre temps ? Utilisez setTimeOut pour l'implémenter vous-même~>_

L'objectif principal de cette section est de faire savoir à tout le monde qu'il existe de nombreuses situations que jQuery doit prendre en compte (beaucoup de sale boulot). Même si le code est simplifié, il reste toujours aussi long.

Après avoir fini d'écrire, j'ai découvert qu'il existe une autre situation que l'émission n'a pas envisagée :

div{ display:none !important; }
<div>大家自己开脑洞，怎么处理吧(⊙０⊙)</div>

Tutoriels vidéo associés recommandés : Tutoriel jQuery (Vidéo )