這篇文章主要介紹了jQuery的XX如何實(shí)現(xiàn)？——2.show與鏈?zhǔn)秸{(diào)用 的相關(guān)資料，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

jQuery使用許久了，但是有一些API的實(shí)現(xiàn)實(shí)在想不通。下面將使用簡(jiǎn)化的代碼來(lái)介紹，主要關(guān)注jQuery的實(shí)現(xiàn)思想。

相較于上一篇，代碼更新了：21~78

(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沒(méi)有style

//刪除style上的display:none

var display = node.style.display;

if(display === 'none'){

//dispaly置為空后，css如果有display則css的生效

//否則默認(rèn)的生效

node.style.display = '';

}

//元素display值為非默認(rèn)值情況，需要還原為oldDisplay：div->display:inline-block

//或 檢測(cè)css上的display是否為none

if(node.style.display==='' || isHidden(node)){

//有oldDispaly則設(shè)置

if(node.oldDisplay) node.style.display = node.oldDisplay;

//沒(méi)有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值

else node.style.display = getDisplay(node);

}

})

//鏈?zhǔn)秸{(diào)用

return this;

},

hide: function(){

Array.prototype.forEach.call(this, function(node){

if(!isHidden(node)) {

//jQuery使用其cache機(jī)制存儲(chǔ)信息，這里簡(jiǎn)化一下

//直接掛載在對(duì)應(yīng)的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的默認(rèn)值

var display = window.getComputedStyle(dom, null).getPropertyValue('display');

document.body.removeChild(dom);

}

return display;

}

function isHidden(node) {

//忽略未append進(jìn)document的元素這種隱藏情況：$('<div>block</div>')未append

return window.getComputedStyle(node, null).getPropertyValue('display') === 'none';

}

jQuery.prototype.init.prototype = jQuery.prototype;

window.$ = jQuery;

})(window);

先拿hide函數(shù)熱身一下。如上篇提到的，jQuery會(huì)將獲取到的nodeList處理成數(shù)組，所以一上來(lái)，我們用forEach處理數(shù)組里的每一個(gè)node節(jié)點(diǎn)。

接下來(lái)，我們只需要將每一個(gè)節(jié)點(diǎn)的style.display置為'none'即可隱藏。很簡(jiǎn)單，對(duì)吧？(⊙０⊙) 。oldDisplay和return this先不管╰(￣▽￣)╮

hide: function(){

Array.prototype.forEach.call(this, function(node){

if(!isHidden(node)) {

//jQuery使用其cache機(jī)制存儲(chǔ)信息，這里簡(jiǎn)化一下

//直接掛載在對(duì)應(yīng)的dom下

node.oldDisplay = getDisplay(node);

node.style.display = 'none';

}

})

return this;

}

其中isHidden是判斷該元素是否隱藏：已經(jīng)隱藏的元素就沒(méi)必要再去處理了，直接跳過(guò)

function isHidden(node) {

//忽略未append進(jìn)document的元素這種隱藏情況：$('<div>block</div>')未append

return window.getComputedStyle(node, null).getPropertyValue('display') === 'none';

}

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

接下來(lái)，來(lái)個(gè)稍繁瑣的show。先拋出一個(gè)問(wèn)題來(lái)引發(fā)一系列問(wèn)題：

hide某個(gè)元素只需要將display:none，那么show呢？

display:block不就行了嗎？這樣確實(shí)可以將元素顯示出來(lái)。但是萬(wàn)一元素原來(lái)的值是display:inline呢？

那在hide處保存原來(lái)的值不就行了嗎？就像以下的代碼：

node.oldDisplay = getDisplay(node);

要是執(zhí)行show前沒(méi)有不執(zhí)行hide呢？比如下面這種情況，不就沒(méi)有oldDisplay了嗎(⊙０⊙)

<style>

div{ display:none; }

</style>

<div>display:none</div>$('div').show()

好，關(guān)鍵的地方到了：我們獲取元素display的默認(rèn)值就可以了吧？比如div默認(rèn)是block，span默認(rèn)是inline。

思路有了，那么接下來(lái)的問(wèn)題是：如何獲取元素display的默認(rèn)值？

嘿嘿嘿，想不到吧？這里需要用點(diǎn)小技巧，大體思路如下：通過(guò)nodeName創(chuàng)建一個(gè)新的標(biāo)簽，再獲取。

有個(gè)地方可以再優(yōu)化一下，getDisplay獲取到元素display默認(rèn)值后，可以使用jQuery的cache機(jī)制存起來(lái)（實(shí)際上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的默認(rèn)值

var display = window.getComputedStyle(dom, null).getPropertyValue('display');

document.body.removeChild(dom);

}

return display;

}

然后，綜合這兩種情況：

//有oldDispaly則設(shè)置

if(node.oldDisplay) node.style.display = node.oldDisplay;

//沒(méi)有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值

else node.style.display = getDisplay(node);

以為這樣就結(jié)束了？NO,show函數(shù)的情況還是挺復(fù)雜的，我們大致要應(yīng)對(duì)這幾種情況：

<style>

#none,#none2{ display: none; }

</style>

<body>

<div id="div">默認(rèn)值為block</div>

<span id="span">默認(rèn)值為inline</span>

<div id="div2" style="display:inline-block;">修改為inline-block</div>

<div id="none">通過(guò)css隱藏了</div>

<div id="none2" style="display:none">通過(guò)css和style隱藏了</div>

</body>

最終,show函數(shù)變成了這鬼樣ψ(╰_╯)。大致思路如下：

show: function(){

Array.prototype.forEach.call(this, function(node){

//if(node.style) continue; //textnode沒(méi)有style

//刪除style上的display:none

var display = node.style.display;

if(display === 'none'){

//dispaly置為空后，css如果有display則css的生效

//否則默認(rèn)的生效

node.style.display = '';

}

//元素display值為非默認(rèn)值情況，需要還原為oldDisplay：div->display:inline-block

//或 檢測(cè)css上的display是否為none

if(node.style.display==='' || isHidden(node)){

//有oldDispaly則設(shè)置

if(node.oldDisplay) node.style.display = node.oldDisplay;

//沒(méi)有則設(shè)置為元素默認(rèn)值或當(dāng)前值

else node.style.display = getDisplay(node);

}

})

}

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

鏈?zhǔn)秸{(diào)用就是類似這種情況：

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

實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單，只要在每個(gè)函數(shù)后面return this即可

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

有同學(xué)說(shuō)：喂！這個(gè)show,hide不對(duì)吧？是不是漏了時(shí)間參數(shù)？ 用setTimeOut自己實(shí)現(xiàn)吧~>_<~+。

本節(jié)最主要是讓大家知道jQuery需要考慮的情況非常多（很多臟活）。即時(shí)簡(jiǎn)化了代碼，依然還是這么長(zhǎng)。

寫完后，發(fā)現(xiàn)show還有一種情況沒(méi)考慮：

div{ display:none !important; }

<div>大家自己開腦洞，怎么處理吧(⊙０⊙)</div>