模拟实现console.dir函数

最新推荐文章于 2022-04-02 20:48:00 发布

最新推荐文章于 2022-04-02 20:48:00 发布 · 142 阅读

文章标签：

#JavaScript #ViewUI

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的对象属性遍历与显示方法，通过递归方式展示对象的属性和方法，并支持折叠展开功能。此外，还介绍了如何对属性进行排序以提高可读性。


function dir(obj,name,initContainer){
	var ul = initContainer ? initContainer : document.createElement("ul");
	var li = document.createElement("li");
	var span = document.createElement("span");
	span.innerHTML = "+"
	span.className = "plus";
	span.onclick = function(){
		if(this.rendered){
			if(this.className === "minus"){
				this.className = "plus";
				this.innerHTML = "+"
				this.parentNode.lastChild.style.display = "block";
			}else{
				this.className = "minus";
				this.innerHTML = "-"
				this.parentNode.lastChild.style.display = "none";
			}
			return ;
		}
		var ul = document.createElement("ul");
		for(var k in obj){
			dir(obj[k],k,ul)
		}
		li.appendChild(ul);

		this.className = "minus";
		this.innerHTML = "-"
		this.rendered = true;
	}
	li.appendChild(span);
	var span2 = document.createElement("span");
	name = name || obj.toString();
	span2.innerHTML = name + " : " + typeof obj;
	li.appendChild(span2);
	ul.appendChild(li);
	return ul
}

/*-----------------------------Test dir--------------------------------*/
window.onload = function(){
	document.body.appendChild(dir(window));
}

测试打印出window对象的所有属性和方法，见附件。

另外还可以排序，以下按属性和方法的名称排序（当然也可以按照typeof类型排序）：


           var properties = [];
            for(var p in obj){
                properties.push(p);
            }
            properties.sort();
            var len = properties.length;
            for(var i=0;i<len;i++){
                dir(obj[properties[i]],properties[i],ul)
            }
            li.appendChild(ul);