Eine kurze Diskussion über die relevanten Kenntnisse zu Show- und Chain-Calls in jQuery

In diesem Artikel erfahren Sie mehr über Show- und Chain-Aufrufe in jQuery. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

jQuery wird schon seit langem verwendet, aber die Implementierung einiger APIs ist wirklich schwer herauszufinden. Im Folgenden wird vereinfachter Code verwendet, wobei der Schwerpunkt hauptsächlich auf den Implementierungsideen von jQuery liegt.

(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);

Erstes Aufwärmen mit der Funktion Ausblenden. Wie im vorherigen Artikel erwähnt, verarbeitet jQuery die erhaltene Knotenliste in ein Array. Daher verwenden wir zunächst forEach, um jeden Knoten im Array zu verarbeiten.

Als nächstes müssen wir nur noch die style.display jedes Knotens auf „none“ setzen, um ihn auszublenden. Ziemlich einfach, oder? (⊙0⊙) . Ignorieren Sie oldDisplay und geben Sie dies vorerst zurück╰(￣▽￣)╮

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

wobei isHidden verwendet wird, um zu bestimmen, ob das Element ausgeblendet ist: Es besteht keine Notwendigkeit, Elemente zu verarbeiten, die bereits ausgeblendet sind. Überspringen Sie einfach

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

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

Als nächstes gehen wir etwas umständlich vor zeigen. Stellen Sie zunächst eine Frage, um eine Reihe von Fragen auszulösen:

Ein bestimmtes Element ausblenden erfordert nur display:none, aber was ist mit show?

Ist display:block nicht genug? Dadurch wird das Element tatsächlich angezeigt. Was aber, wenn der ursprüngliche Wert des Elements display:inline ist?

Würde es nicht ausreichen, den ursprünglichen Wert bei hide zu speichern? Genau wie der folgende Code:

node.oldDisplay = getDisplay(node);

Was passiert, wenn hide nicht ausgeführt wird, bevor show ausgeführt wird? Wäre zum Beispiel in der folgenden Situation kein oldDisplay vorhanden? (⊙0⊙)

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

Okay, der entscheidende Punkt ist hier: Wir können einfach den Standardwert der Elementanzeige erhalten, Rechts? Beispielsweise ist p standardmäßig auf „Block“ und „Span“ auf „Inline“ eingestellt.

Da wir nun die Idee haben, lautet die nächste Frage: Wie erhalte ich den Standardwert der Elementanzeige?

Hehehehe, fällt dir das nicht ein? Hier ist ein kleiner Trick erforderlich. Die allgemeine Idee lautet wie folgt: Erstellen Sie über nodeName ein neues Etikett und rufen Sie es dann ab.

Es gibt einen Ort, der weiter optimiert werden kann. Nachdem getDisplay den Standardanzeigewert des Elements erhalten hat, kann es mithilfe des Cache-Mechanismus von jQuery gespeichert werden (tatsächlich tut dies auch jQuery).

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

Dann kombinieren Sie diese beiden Situationen:

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

Denken Sie, das ist das Ende? NEIN, die Situation der Show-Funktion ist ziemlich kompliziert. Wir müssen uns im Allgemeinen mit diesen Situationen auseinandersetzen:

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

Am Ende wurde aus der Show-Funktion dieses seltsame ψ(╰_╯). Die allgemeine Idee ist wie folgt:

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

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

Kettenruf ähnelt dieser Situation:

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

ist sehr einfach umzusetzen, solange jede Funktion Geben Sie dies einfach später zurück

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

Ja, der Klassenkamerad sagte: Hallo! Ist das nicht das Einblenden und Verstecken, oder? Habe ich den Zeitparameter übersehen? Verwenden Sie setTimeOut, um es selbst zu implementieren~>_

Der Hauptzweck dieses Abschnitts besteht darin, alle wissen zu lassen, dass es viele Situationen gibt, die jQuery berücksichtigen muss (eine Menge Drecksarbeit). Auch wenn der Code vereinfacht ist, ist er immer noch so lang.

Nachdem ich mit dem Schreiben fertig war, stellte ich fest, dass es eine andere Situation gibt, die nicht berücksichtigt wurde:

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

Empfohlene verwandte Video-Tutorials: jQuery-Tutorial (Video )