Javascript——说说js的调试
最近比較吐槽，大家都知道，現(xiàn)在web前端相對幾年前來說已經(jīng)變得很重了，各種js框架，各種面對對象，而且項(xiàng)目多了，就會提取公共模塊。
這些模塊的UI展示都一樣，不一樣的就是后臺邏輯，舉個(gè)例子吧，我們做企業(yè)差旅的時(shí)候，通常都有一個(gè)成本中心的js公共模塊，客戶在預(yù)定機(jī)票的時(shí)候來填寫這個(gè)成本中心，而這種成本中心分布在online，offline和app等預(yù)定端，這樣也是方便后期和客戶公司進(jìn)行月結(jié)算。
我們還知道，項(xiàng)目做大了，復(fù)雜化了，SOA化了之后，很多問題就來了，就像web中的一個(gè)理論，所有前端的數(shù)據(jù)都是不可信的，那對方團(tuán)隊(duì)的接口數(shù)據(jù)又何嘗不是，以前項(xiàng)目小的時(shí)候，不會那么不自信，也只會在Logic?error的時(shí)候會記錄下日志，正常的業(yè)務(wù)流程一般很少記錄，畢竟info日志看著不美觀，而且還會消耗服務(wù)器帶寬，也還會拖累web的性能。
但是項(xiàng)目大了，當(dāng)你某天在項(xiàng)目中遇到了奇怪的bug時(shí)，你靠著殘缺不全的日志，好不容易用肉眼逐行追溯到了接口，但是參數(shù)太多，無法準(zhǔn)確的還原接口的參數(shù)數(shù)據(jù)，但是你又100%的自信認(rèn)定肯定就是接口的返回問題，但是又拿不出完整的報(bào)文，這時(shí)候你又沒法找接口提供方，當(dāng)時(shí)那個(gè)無奈呀，多想最好每行都有日志該多好啊。
有了教訓(xùn)后，記流程日志的趨勢越來越盛行，最終也釀造了一個(gè)年初的大事件，稀里糊涂的說了一大堆，web后端如此，那現(xiàn)在的重前端不也一樣要記錄日志么？我們知道既然是公共的js模塊，那這個(gè)模塊肯定自己封裝了一些方法，肯定是絕對不可以讓第三方程序去操作它自己的文本結(jié)點(diǎn)，比如下面這樣：
1?<!--third??module?-->
2?公司：<input?type="text"?id="company"?value="xxx有限公司"?/>
3?員工姓名：<input?type="text"?id="username"?value="張三"?/>
4?<!--?-->
5?
6?<script?type="text/javascript">
7?
8?????//成本中心
9?????var?costCenter?=?(function?()?{
10?????????var?company?=?(document.getElementById("company")?||?"")?&&?document.getElementById("company").value;
11?????????var?username?=?(document.getElementById("username")?||?"")?&&?document.getElementById("username").value;
12?
13?????????var?result?=?{
14?????????????getInfo:?function?()?{
15?????????????????return?{?company:?company,?username:?username?};
16?????????????},
17?????????????validation:?function?()?{
18?????????????????return?Boolean(company?&&?username);
19?????????????}
20?????????};
21?
22?????????return?result;
23?
24?????})();
25?
26?</script>
為了簡化操作，第三方UI提供了公司名和員工姓名的UI結(jié)點(diǎn)，并且封裝了一個(gè)costcenter類來提供讀取方法，可以看到，我的預(yù)定程序只需讀取costCenter.getInfo就好了，也起到了一個(gè)封裝的作用。
但是問題就出現(xiàn)在這里，項(xiàng)目實(shí)戰(zhàn)中會因?yàn)楦鞣N原因?qū)е略赾ostcenter中取不到值，當(dāng)然也可能是common?ui的bug。
但是當(dāng)時(shí)你又不能非常確定是否真的取到了值，但是在邏輯上就算取不到值，原則上你也不能阻止訂單提交，所以為了徹底追蹤bug，就寫了個(gè)logCenter單例類來記錄日志。通常用js來記錄log有這種方法。
<1>?ajax
這種方式很容易想到，但是你使用原生的xmlhttprequest的話，還需要考慮瀏覽器兼容，但不用原生的話，就要借助于第三方框架，比如jquery，但是畢竟還是有很多公司是不使用jquery的，所以這個(gè)要根據(jù)實(shí)際的需要來使用了。
1?????//日志中心
2?????var?logCenter?=?(function?()?{
3?
4?????????var?result?=?{
5?????????????info:?function?(title,?message)?{
6?????????????????//ajax操作
7?????????????????$.get("http://xxx.com",?{?"title":?title,?"message":?message?},?function?()?{
8?
9?????????????????},?"post");
10?
11?????????????}
12?????????};
13?
14?????????return?result;
15?
16?????})();
<2>image
我們的dom中有一個(gè)叫做image的對象，所以可以通過動態(tài)給它的src賦值來達(dá)到請求后臺url的目的，同時(shí)在url中加上我們需要傳遞?title和message信息，這種動態(tài)給image.src的方式是不需要考慮瀏覽器兼容性的問題，非常不錯(cuò)。
1?????//日志中心
2?????var?logCenter?=?(function?()?{
3?
4?????????var?result?=?{
5?????????????info:?function?(title,?message)?{
6?????????????????//ajax操作
7?????????????????$.get("http://xxx.com",?{?"title":?title,?"message":?message?},?function?()?{
8?
9?????????????????},?"post");
10?
11?????????????},
12?
13?????????????info_image:?function?(title,?message)?{
14?????????????????//image
15?????????????????var?img?=?new?Image();
16?
17?????????????????img.src?=?"http://www.baidu.com?title="?+?title?+?"&message="?+?message?+?"&temp="?+?(Math.random()?*?100000);
18?????????????}
19?????????};
20?
21?????????return?result;
22?
23?????})();
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/dianshi/p/4171646.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的Javascript——说说js的调试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android中处理崩溃异常 (转)
- 下一篇： Javascript 面向对象编程定义接