jQuery のショー呼び出しとチェーン呼び出しに関する関連知識に関する簡単な説明

この記事では、jquery の show 呼び出しとchain 呼び出しについて学びましょう。一定の参考値があるので、困っている友達が参考になれば幸いです。

私は長い間 jquery を使用してきましたが、いくつかの api 実装がまったく理解できません。以下では、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的元素这种隐藏情况：$('<div>block</div>')未append
return window.getcomputedstyle(node, null).getpropertyvalue('display') === 'none';
}
jquery.prototype.init.prototype = jquery.prototype;
window.$ = jquery;
})(window);

最初に非表示機能を試してみましょう。前回の記事で述べたように、jqueryは取得したnodelistを配列に加工するので、まずはforeachを使って配列内の各ノードを処理します。

次に、各ノードの style.display を「none」に設定して非表示にするだけです。とてもシンプルですよね？ (⊙0⊙) 。 olddisplay は無視して、今回はこれを返します╰(￣▽￣)╮

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

このうち、ishidden は要素が非表示かどうかを判断するために使用されます。すでに非表示になっている要素を処理する必要はなく、スキップするだけです。彼ら

function ishidden(node) {
//忽略未append进document的元素这种隐藏情况：$('<div>block</div>')未append
return window.getcomputedstyle(node, null).getpropertyvalue('display') === 'none';
}

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

次に、やってみましょうちょっと面倒な番組。まず、一連の質問を引き起こす質問を提起します。

特定の要素を非表示にする場合は、display:none のみが必要ですが、show についてはどうすればよいでしょうか。

display:block だけでは十分ではありませんか?これにより、実際に要素が表示されます。しかし、要素の元の値が display:inline だったらどうなるでしょうか?

元の値を非表示に保存するだけで十分ではないでしょうか?次のコードのようになります。

node.olddisplay = getdisplay(node);

show が実行される前に hide が実行されなかった場合はどうなりますか?たとえば、次の状況では、olddisplay (⊙0⊙) は存在しないのではないでしょうか。

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

重要な点はここです。表示要素のデフォルト値を取得するだけで済みますよね。たとえば、p のデフォルトはブロック、span のデフォルトはインラインです。

アイデアが得られたので、次の質問は次のとおりです。要素表示のデフォルト値を取得する方法 スパン>?

ふふふ、思いつきませんか？ここでは少しコツが必要です。一般的な考え方は次のとおりです。nodename を使用して新しいラベルを作成し、それを取得します。

さらに最適化できる箇所があり、getdisplay が要素のデフォルトの表示値を取得した後、jquery のキャッシュ機構を使用して保存できます (実際、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;
}

次に、次の 2 つの状況を組み合わせます:

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

これで終わりだと思いますか?いいえ、show 関数の状況は非常に複雑です。一般的には次のような状況に対処する必要があります:

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

最終的に show 関数はこのようになりました ψ(╰_╯)。一般的な考え方は次のとおりです。

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

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

チェーン コール は次のようなものです。この状況 ：

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

実装は非常に簡単で、各関数の後にこれを返すだけです。

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

何人かの生徒はこう言いました。「こんにちは！」これはショーとハイドではないでしょうか？時間パラメータを見逃していませんか? settimeout を使用して自分で実装してください~>_

このセクションの主な目的は、jquery が考慮する必要がある状況 (多くの汚れた作業) があることを皆さんに知っていただくことです。コードを簡略化したとしても、それでも非常に長いです。

書き終えた後、番組が考慮していない別の状況があることがわかりました:

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

関連ビデオチュートリアルの推奨事項: jquery チュートリアル (ビ​​デオ)