在带有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>
附件是效果图和实例。