上篇文章给大家介绍了jQuery的框架，有关jquery的基础知识可以参考下。
jQuery使用许久了，但是有一些API的实现实在想不通。下面将使用简化的代码来介绍，主要关注jQuery的实现思想。
相较于上一篇，代码更新了：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没有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);
先拿hide函数热身一下。如上篇提到的，jQuery会将获取到的nodeList处理成数组，所以一上来，我们用forEach处理数组里的每一个node节点。
接下来，我们只需要将每一个节点的style.display置为'none'即可隐藏。很简单，对吧？(⊙０⊙) 。oldDisplay和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;
}
其中isHidden是判断该元素是否隐藏：已经隐藏的元素就没必要再去处理了，直接跳过
function isHidden(node) {
//忽略未append进document的元素这种隐藏情况：$('<div>block</div>')未append
return window.getComputedStyle(node, null).getPropertyValue('display') === 'none';
}
--------------------------
接下来，来个稍繁琐的show。先抛出一个问题来引发一系列问题：
hide某个元素只需要将display:none，那么show呢？
display:block不就行了吗？这样确实可以将元素显示出来。但是万一元素原来的值是display:inline呢？
那在hide处保存原来的值不就行了吗？就像以下的代码：
node.oldDisplay = getDisplay(node);
要是执行show前没有不执行hide呢？比如下面这种情况，不就没有oldDisplay了吗(⊙０⊙)
<style>
div{ display:none; }
</style>
<div>display:none</div>$('div').show()
好，关键的地方到了：我们获取元素display的默认值就可以了吧？比如div默认是block，span默认是inline。
思路有了，那么接下来的问题是：如何获取元素display的默认值？
嘿嘿嘿，想不到吧？这里需要用点小技巧，大体思路如下：通过nodeName创建一个新的标签，再获取。
有个地方可以再优化一下，getDisplay获取到元素display默认值后，可以使用jQuery的cache机制存起来（实际上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;
}
然后，综合这两种情况：
//有oldDispaly则设置 if(node.oldDisplay) node.style.display = node.oldDisplay; //没有则设置为元素默认值或元素当前值 else node.style.display = getDisplay(node);
以为这样就结束了？NO,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()
实现起来非常简单，只要在每个函数后面return this即可
--------------------------
有同学说：喂！这个show,hide不对吧？是不是漏了时间参数？ 用setTimeOut自己实现吧~>_<~+。
本节最主要是让大家知道jQuery需要考虑的情况非常多（很多脏活）。即时简化了代码，依然还是这么长。
写完后，发现show还有一种情况没考虑：
div{ display:none !important; }
<div>大家自己开脑洞，怎么处理吧(⊙０⊙)</div>
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。