【Zepto源码】隐藏和显示

老姚
老姚 发布于 7 天前 浏览:137 类型:原创 - 随笔 分类:JavaScript - zepto源码分析系列 二维码: 作者原创 版权保护

#hide
隐藏功能比较简单,直接设置display为"none"即可:
$.fn.hide = function() {
	return this.css('display', 'none');
};


#show
show就有说道了。
我们平常理解的show就是显示。准确的说应该恢复到默认的display才对。
不能直接的把display设置成"block",因为有的元素默认值是"list-item",比如li元素,有的元素默认值是"table-cell",比如td元素。
因此我们需要知道,不同的元素的默认值是什么:
// 不同类型元素的默认display属性缓存容器
var elementDisplay = {};
function defaultDisplay(nodeName) {
	var element, display;
	if (!elementDisplay[nodeName]) {
		
		// 创建给定类型元素
		element = document.createElement(nodeName);
		
		// 追加到body上,不在页面上,不然display是没有值的
		document.body.appendChild(element);
		
		// 获取到display的属性值
		display = getComputedStyle(element, "").getPropertyValue("display");
		
		// 拿到display后要删除,我们添加的这个节点
		element.parentNode.removeChild(element);
		
		// 如果是none,用block代替。
		// 比如有人设置了一些全局样式,比如把li设置display:none
		display == "none" && (display = "block");
		
		// 缓存进来
		elementDisplay[nodeName] = display;
	}
	return elementDisplay[nodeName];
}

有了该辅助函数后,show就简单了:
$.fn.show = function() {
	return this.each(function() {
		this.style.display == "none" && (this.style.display = "");
		var display = getComputedStyle(this, "").getPropertyValue('display');
		if ( display == "none") {
			this.style.display = defaultDisplay(this.nodeName);
		}
	});
};

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

#toggle
toggle就是切换,show和hide之间的切换。也支持设置直接使用show还是hide:
$.fn.toggle = function(setting) {
	return this.each(function() {
		var el = $(this);
		(setting === undefined ? 
			el.css("display") == "none" : setting) ? 
			el.show(): el.hide();
	});
};


本文完。
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 2 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
老姚
老姚6 天前2F
恩,我也不用zepto。只是因为其代码少才分析它的。jquery兼容性代码多。不好分析(除了贴代码也没啥可说的)。 //@知行合一:zepto,据说是刚能用,jquery则是好用。
举报 支持 (0) 回复 (0)
知行合一
知行合一6 天前1F
zepto,据说是刚能用,jquery则是好用。
举报 支持 (0) 回复 (1)
老姚 老姚 作者

与自己为敌,与自己为友,一边深挖思想,一边埋葬自己。

作者最新