Web调试技巧——对象跟踪

做web的离不开两个常用对象:json 对象 和 dom 对象

有的时候在调试的时候知道得到的是个对象,也对这个对象做点儿“手脚”,可是就是不知道

这个对象中用什么东西?这下就郁闷了,进入了浑浑噩噩的疯狂试验中~~~~~

现在说一下如何简单区分上面的两个对象(所有测试都是在IE中进行,不保证其它浏览器支持!)

调试步骤:——————————————————

1.确定对象类型

很简单了,使用alert 弹出看看弹出内容是什么就OK了

如果弹出的内容是 [Object Object] ,那多半就是 json 对象了

如果弹出的内容类似[object HTML.......] 格式,那肯定是 html 的 dom 对象了

2.确定了对象类型,接下来就是要看对象的代码段内容了

2.1 如果是 HTML DOM 对象

直接用 alert(dom1.outerHTML); 就可以弹出 dom 元素了

2.2 如果是 json 对对象

使用 alert(String.toSerialize(myjson)); 就OK了

注意:String.toSerialize() 方法是自己封装的

测试代码段如下:——————————————————

<body>
<div id="mydiv">
<span id ="myspan" >hello world!</span>
</div>
<input type="button" onClick="test()" value="Test"></button>

<script language="javascript">
var myjson=[{id:"i1",value:"v1"},{id:"i2",value:"v2"}]
var dom1 = document.getElementById("mydiv");
function test()
{
//1.查看对象类型
alert(dom1);
alert(myjson);

//2.发序列化对象对象内容
//2.1 如果是 dom 元素
alert(dom1.outerHTML);
//2.2 如果是 json 元素
alert(String.toSerialize(myjson));


}

String.format = function (str)
{
if (arguments.length == 0)
return null;

var str = arguments[0];
for (var i = 1; i < arguments.length; i++)
{
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
};
/*对string 对象的扩展*/
/*对象序列化为字符串*/
String.toSerialize = function (obj)
{
var ransferCharForJavascript = function (s)
{
var newStr = s.replace(
/[\x26\x27\x3C\x3E\x0D\x0A\x22\x2C\x5C\x00]/g,
function (c)
{
ascii = c.charCodeAt(0);
return '\\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16));
}
);
return newStr;
}
if (obj == null)
{
return null
}
else if (obj.constructor == Array)
{
var builder = [];
builder.push("[");
for (var index in obj)
{
if (typeof obj[index] == "function") continue;
if (index > 0) builder.push(",");
builder.push(String.toSerialize(obj[index]));
}
builder.push("]");
return builder.join("");
}
else if (obj.constructor == Object)
{
var builder = [];
builder.push("{");
var index = 0;
for (var key in obj)
{
if (typeof obj[key] == "function") continue;
if (index > 0) builder.push(",");
builder.push(String.format("\"{0}\":{1}", key, String.toSerialize(obj[key])));
index++;
}
builder.push("}");
return builder.join("");
}
else if (obj.constructor == Boolean)
{
return obj.toString();
}
else if (obj.constructor == Number)
{
return obj.toString();
}
else if (obj.constructor == String)
{
return String.format('"{0}"', ransferCharForJavascript(obj));
}
else if (obj.constructor == Date)
{
return String.format('{"__DataType":"Date","__thisue":{0}}', obj.getTime() - (new Date(1970, 0, 1, 0, 0, 0)).getTime());
}
else if (this.toString != undefined)
{
return String.toSerialize(obj);
}
};
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值