上篇文章给大家介绍了，有关jquery的基础知识可以参考下。
jQuery使用许久了，但是有一些API的实现实在想不通。下面将使用简化的代码来介绍，主要关注jQuery的实现思想。
上一篇，代码更新了：21~78
display:inline-block
//或 检测css上的
display是否为none
if(node.style.
display==='' || isHidden(node)){
//有old
dispaly则设置
if(node.old
display) node.style.
display = node.old
display;
//没有则设置为元素
默认值或元素当前值
else node.style.
display = get
display(node);
}
})
//链式
调用
return this;
},hide: function(){
Array.prototype.forEach.call(this,function(node){
if(!isHidden(node)) {
//jQuery使用其cache机制存储信息，这里简化一下
//直接挂载在对应的dom下
node.old
display = get
display(node);
node.style.
display = 'none';
}
})
return this;
}
}
function get
display(node){
var
display = window.getCo
mputedStyle(node,null).getPropertyValue('
display');
if(
display === 'none'){
var dom = document.createElement(node.nodeName);
//插入到body中
document.body.appendChild(dom);
//即可
获取到元素
display的
默认值
var
display = window.getCo
mputedStyle(dom,null).getPropertyValue('
display');
document.body.removeChild(dom);
}
return
display;
}
function isHidden(node) {
//忽略未append进document的元素这种隐藏情况：$('
block
')未append
return window.getCo
mputedStyle(node,null).getPropertyValue('
display') === 'none';
}
jQuery.prototype.init.prototype = jQuery.prototype;
window.$ = jQuery;
})(window);
先拿
hide
函数热身一下。如上篇提到的，jQuery会将
获取到的nodeList处理成数组，所以一上来，我们用forEach处理数组里的每
一个node节点。
接下来，我们只需要将每一个节点的style.display置为'none'即可隐藏。很简单，对吧？(⊙０⊙) 。olddisplay和return this先不管╰(￣▽￣)╮
rush:js;">
hide: function(){
Array.prototype.forEach.call(this,function(node){
if(!isHidden(node)) {
//jQuery使用其cache机制存储信息，这里简化一下
//直接挂载在对应的dom下
node.old
display = get
display(node);
node.style.
display = 'none';
}
})
return this;
}
其中isHidden是判断该元素是否隐藏：已经隐藏的元素就没必要再去处理了，直接跳过
rush:js;">
function isHidden(node) {
//忽略未append进document的元素这种隐藏情况：$('
block
')未append
return window.getCo
mputedStyle(node,null).getPropertyValue('
display') === 'none';
}
--------------------------
接下来，来个稍繁琐的show。先抛出一个问题来引发一系列问题：
hide某个元素只需要将display:none，那么show呢？
display:block不就行了吗？这样确实可以将元素显示出来。但是万一元素原来的值是display:inline呢？
那在hide处保存原来的值不就行了吗？就像以下的代码：
rush:js;">
node.old
display = get
display(node);
要是执行show前没有不执行hide呢？比如下面这种情况，不就没有olddisplay了吗(⊙０⊙)
rush:js;">
$('div').show()
好，关键的地方到了：我们获取元素display的默认值就可以了吧？比如div默认是block，span默认是inline。
思路有了，那么接下来的问题是：
？
嘿嘿嘿，想不到吧？这里需要用点小技巧，大体思路如下：通过nodeName创建一个新的标签，再获取。
有个地方可以再优化一下，getdisplay获取到元素display默认值后，可以使用jQuery的cache机制存起来（实际上jQuery也是这么做了）。
rush:js;">
function get
display(node){
var
display = window.getCo
mputedStyle(node,null).getPropertyValue('
display');
document.body.removeChild(dom);
}
return
display;
}
然后，综合这两种情况：
rush:js;">
//有old
dispaly则设置
if(node.old
display) node.style.
display = node.old
display;
//没有则设置为元素
默认值或元素当前值
else node.style.
display = get
display(node);
以为这样就结束了？NO,show函数的情况还是挺复杂的，我们大致要应对这几种情况：
rush:js;">
默认值为block
默认值为inline
display:inline-block;">
修改为inline-block
display:none">通过css和style隐藏了
最终,show函数变成了这鬼样ψ(╰_╯)。大致思路如下：
display:inline-block
//或 检测css上的
display是否为none
if(node.style.
display==='' || isHidden(node)){
//有old
dispaly则设置
if(node.old
display) node.style.
display = node.old
display;
//没有则设置为元素
默认值或当前值
else node.style.
display = get
display(node);
}
})
}
--------------------------
就是类似这种情况：
rush:js;">
$('div').show().hide().css('height','300px').toggle()
实现起来非常简单，只要在每个函数后面return this即可
--------------------------
有同学说：喂！这个show,hide不对吧？是不是漏了时间参数？ 用setTimeOut自己实现吧~>_<~+。
本节最主要是让大家知道jQuery需要考虑的情况非常多（很多脏活）。即时简化了代码，依然还是这么长。
写完后，发现show还有一种情况没考虑：
rush:js;">
div{
display:none !important; }
大家自己开脑洞，怎么处理吧(⊙０⊙)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
