【Zepto源码】隐藏和显示

原创 老姚 随笔 zepto源码分析系列 768阅读 2017-03-20 14:20:17 举报

#hide
隐藏功能比较简单,直接设置display为"none"即可:
javascript 代码

#show
show就有说道了。
我们平常理解的show就是显示。准确的说应该恢复到默认的display才对。
不能直接的把display设置成"block",因为有的元素默认值是"list-item",比如li元素,有的元素默认值是"table-cell",比如td元素。
因此我们需要知道,不同的元素的默认值是什么:
javascript 代码

有了该辅助函数后,show就简单了:
javascript 代码

此时我们应该知道show是有坑的。比如我们设置某个div的display为'inline-block'。一旦先调用hide,再调用show后,就变成了block了。因为show是恢复默认的display。

#toggle
toggle就是切换,show和hide之间的切换。也支持设置直接使用show还是hide:
javascript 代码

本文完。

评论 ( 5 )
最新评论
知行合一 4F 2017-05-09 18:08:45 5F

嗯,不知道您方便不?有空想登门拜访下。

老姚 3F 2017-05-09 18:05:30 4F

上海,离职中。核心文件还差几个dom操作api。其他文件,比如事件和ajax,还没分析呢。。。

知行合一 2017-05-09 18:00:42 3F

老姚这个系列结束没?ps:在哪里工作呢?

老姚 1F 2017-03-21 13:17:07 2F

恩,我也不用zepto。只是因为其代码少才分析它的。jquery兼容性代码多。不好分析(除了贴代码也没啥可说的)。

知行合一 2017-03-21 13:12:57 1F

zepto,据说是刚能用,jquery则是好用。