脚本alert打印对象结构

最新推荐文章于 2023-08-24 09:24:22 发布

原创最新推荐文章于 2023-08-24 09:24:22 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #日志 #ViewUI

Javascript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了在JavaScript项目中如何使用alertObj方法来快速查看和理解DOM对象的属性，该方法简单小巧，无需额外的页面元素支持，提供了一种便捷的方式来替代查看API或使用复杂的日志组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在带有js项目开发中：

1 要属性新的js类库

2 了解某一个DOM对象的属性

要么翻看API，要么使用alert或者其他日志组件。alertObj就是这样的一个组件。

alertObj,是一个非常小的js方法，用来打印某一个对象的属性。

只要在你们工程的JS通用工具类里边(我想每个项目都应该会有吧)添加这个方法，就可以随时调用了，

优点就是小和方便，不想那么多打的日志组件，alertObj仅仅是一个方法，不需要任何页面元素的支持。

alertObj，将alert方法用到极致；alertObj传统而又不简单。

实例：

<html>
<script>
/*打印对象属性
只打印对象的直接属性，即第一层属性
如果对象属性个数大于15个，则每三个属性为一行，否则一个属性为一行
@JSON 支持JSON参数传递或者直接把对象作为参数传递

JSON可用参数：
@obj:打印的对象
@key:对象属性的过滤条件，模糊匹配(不区分大小写) 默认为空
@tab:每个属性前边的制表符号。默认为空
@title:题目，默认为对象属性
@showFun:是否显示方法体内容 默认为false
*/
var alertObj=function(JSON){
	JSON = JSON||{};
	if(!!JSON.obj===false){
		JSON = {obj:JSON};
	}
	var aObj = JSON.obj||{};//打印对象
	var key  = JSON.key ||"";//属性名称过滤条件
	var tab  =JSON.tab ||"";//制表位
	var title =JSON.title ||"对象属性";//题目
	var showFun  = JSON.showFun || false;//是否显示方法体内容 默认为false
	
	//TODO 属性排序
	var propertys = [];
	for(var o in aObj){
		//没有属性过滤条件，或者属性包含过滤条件。
		if(!!key===false || (!!key===true && (o+"").toLowerCase().indexOf(key)>=0) ){
			propertys.push(o);
		}
	}
	propertys.sort();
	var len = propertys.length;
	var index = 1;
	var max =20;//每次最多打印max个属性(受alert可显示空间限制)
	var v = title+":\n"; 
	for(var i in propertys){
		var o = propertys[i];
		if(typeof(aObj[o])!=="object" && typeof(aObj[o])!=="function" ){
			v+=(tab+"-"+o+"："+aObj[o]+"\n");			
		}else if(typeof(aObj[o])=="function"){
			if(showFun!=true){
				v+=(tab+"+"+o+"：[function]\n");
			}else{
				v+=(tab+"+"+o+"："+aObj[o]+"\n");
			}
		}else{
			v+=(tab+"+"+o+"：[object]\n");
		}
		if(index++%max==0){
			alert(v);
			//第二次打印将会追加编号
			v = title+Math.ceil(index/max)+":\n"; ;//置空，从新累加
		}
	}
	if(len%max!=0 || len==0){//打印最后一次 | len=0表示没有匹配的属性
		alert(v);
	}
	
	//alert("len = "+len+",max  ="+max+","+len%max);
}
function test(){
	//打印dom对象
	alertObj(window);
	alertObj({obj:window,key:"load",title:"window带有load的属性"});
	//构建js对象
	var perosn = {Name:"abc",age:123,son:{Name:"xx",age:23,cry:function(){alert('妈妈，我要喝奶');}}};
	//打印js对象
	alertObj({obj:perosn,tab:"#",title:"person对象属性"});
	alertObj({obj:perosn.son,title:"persond对象son属性的属性"});
	alertObj({obj:perosn.son,title:"persond对象son属性的属性(显示方法体)",showFun:true});
}
</script>
<body>
<input type="button" value="test" onclick="test()" >
</body>
</html>

附件是效果图和实例。