jQuery--Dom元素隐藏和显示原理（源码2.0.3）

 

对于Dom元素显示和隐藏的操作，jQuery提供了比较方便的函数，我们也经常使用:

1. show() : 显示Dom元素
2. hide() : 隐藏Dom元素
3. toggle() : 改变Dom元素的显示状态，如果当前是显示状态函数运行后则会隐藏

也曾想过这三个函数的实现原理，如果以为是简单的设置样式，改变display属性的值设置为block或是none。那就错了，看了下jQuery2.0.3的源码，了解了这三个函数的实现原理，其实实现的逻辑还有点小复杂，下面来介绍下具体实现：

 

1、 数据存储Data

 

(1) 概述

 

为什么要说数据存储呢，和Dom元素的隐藏和显示好像没有关系。其实jQuery用数据存储Data类和cache来保存每一个Dom元素之前的display状态。

jQuery中Data类是用来进行数据管理的，一共创建了两个实例对象：

data_user = new Data();
data_priv = new Data();

在Dom元素显示和隐藏功能中就用到了data_priv对象。

 

(2) 存储逻辑

 

Data类的prototype方法有：
key(), set(), get(), access(), Remove(), hasData(), discard()

key()函数需要传入一个Dom元素，在函数中会将这个Dom元素通过defineProperties()函数绑定一个unlock值。Unlock值是一个自增的整数Data.uid。

这样就有了一个Dom元素对应一个key值，然后保存到cache中：

Cache[unlock] [‘key’] = value; （在Dom隐藏和显示时key的值是olddisplay）
例子：Cache²['olddisplay'] = 'block'

这样就会保存每一个Dom的display的状态了。其中get(), set()函数通过传参可以获取和保存display状态。

 

2、 主要功能函数showHide ( elements, show )

 

参数说明：
(1) Elements参数：指的是需要显示或是隐藏的dom元素（可以是一个数组），Showhide函数会遍历elements进行处理。 
(2) show参数: 表示是否进行dom显示，可以传递true。如果需要隐藏，则不用传入任何参数，当然false也是可以的。

在Dom元素显示的时候，jQuery会先判断cache中保存的display属性的值，如果有值例如block，则会将display设置为该值。否则会通过css_defaultDisplay()函数将Dom元素的display设置为创建时的默认值，然后将这个display的属性值保存在cache中。

在进行Dom元素隐藏的时候，就是将display属性的值设置为none。

show函数、hide函数、toggle函数实现就是调用这个主要的功能函数showHide()，传入不同的参数。其中toggle函数会用isHidden()函数先判断当前元素的显示状态。

 

3、css_defaultDisplay()函数实现原理：

 

jQuery会先从elemdisplay对象中寻找相应元素标签的display属性，如果存在即返回。 elemdisplay初始化值：{ BODY: "block" }

如果不存在则会在body中添加一个新的该标签的Dom元素，取它的display属性的值。这个时候就会有一个情况，如果用户在样式表中设置了该标签的display属性是none，那么取到的值就是none。

jQuery针对这个问题，做了特殊处理，新建一个iframe然后在这个iframe中创建一个新的该标签，然后取它的display属性的值，这样就不会受用户样式表的影响了。取到的display属性默认值将添加到elemdisplay对象当中，方便下次取用。