Javascript之旅 第七站 說說js的除錯

2021-09-23 21:25:19 字數 1804 閱讀 7032

最近比較吐槽,大家都知道,現在web前端相對幾年前來說已經變得很重了,各種js框架,各種面對物件,而且專案多了,就會提取公共模組,

這些模組的ui展示都一樣,不一樣的就是後台邏輯,舉個例子吧,我們做企業差旅的時候,通常都有乙個成本中心的js公共模組,客戶在預定機票

我們還知道,專案做大了,複雜化了,soa化了之後,很多問題就來了,就像web中的乙個理論,所有前端的資料都是不可信的,那對方團隊

的介面資料又何嘗不是,以前專案小的時候,不會那麼不自信,也只會在logic error的時候會記錄下日誌,正常的業務流程一般很少記錄,畢竟

info日誌看著不美觀,而且還會消耗伺服器頻寬,也還會拖累web的效能,但是專案大了,當你某天在專案中遇到了奇怪的bug時,你靠著殘缺不

全的日誌,好不容易用肉眼逐行追溯到了介面,但是引數太多,無法準確的還原介面的引數資料,但是你又100%的自信認定肯定就是介面的返回

問題,但是又拿不出完整的報文,這時候你又沒法找介面提供方,當時那個無奈呀,多想最好每行都有日誌該多好啊,有了教訓後,記流程日誌的

趨勢越來越盛行,最終也釀造了乙個年初的大事件,稀里糊塗的說了一大堆,web後端如此,那現在的重前端不也一樣要記錄日誌麼?我們知道既

然是公共的js模組,那這個模組肯定自己封裝了一些方法,肯定是絕對不可以讓第三方程式去操作它自己的文字結點,比如下面這樣:

公司:員工姓名:

為了簡化操作,第三方ui提供了公司名和員工姓名的ui結點,並且封裝了乙個costcenter類來提供讀取方法,可以看到,我的預定程式只需讀

取costcenter.getinfo就好了,也起到了乙個封裝的作用,但是問題就出現在這裡,專案實戰中會因為各種原因導致在costcenter中取不到值,

當然也可能是common ui的bug,但是當時你又不能非常確定是否真的取到了值,但是在邏輯上就算取不到值,原則上你也不能阻止訂單提交,

所以為了徹底追蹤bug,就寫了個logcenter單例類來記錄日誌。通常用js來記錄log有這種方法。

<1> ajax

這種方式很容易想到,但是你使用原生的xmlhttprequest的話,還需要考慮瀏覽器相容,但不用原生的話,就要借助於第三方框架,比如

jquery,但是畢竟還是有很多公司是不使用jquery的,所以這個要根據實際的需要來使用了。

//日誌中心

var logcenter = (function () , function () , "post");}};

return result;

})();

<2>image

我們的dom中有乙個叫做image的物件,所以可以通過動態給它的src賦值來達到請求後台url的目的,同時在url中加上我們需要傳遞 title和

message資訊,這種動態給image.src的方式是不需要考慮瀏覽器相容性的問題,非常不錯。

//日誌中心

從上圖中我們看到network中已經有了url請求,伺服器端就可以querystring下url的引數,然後就可以開開心心的把日誌記錄下來,供後續我們

徹底的排查js前端中的流程資訊,到時候誰都不可以扯皮。

OpenGL實戰教程(8) 第七站 顯示列表

對於複雜的圖形,有成千上萬個頂點,每次重新整理螢幕都於重新計算頂點,讓cpu執行重複的工作,浪費了cpu資源和執行速度的下降。如果把計算好的結果存放到顯示列表中,需要重新整理螢幕時,只需要把資料重新整理到顯示卡裡就可以了,節省cpu計算資源。gluint glgenlists glsizei ran...

php學習之旅第七天

概念 使用static關鍵字修飾的類成員,表示該成員屬於類訪問 靜態成員 靜態屬性 靜態方法 靜態成員是明確用來給類訪問的,而不是物件 靜態成員只是多了static關鍵字修飾,本身也可以被物件訪問 靜態成員同樣使用訪問修飾限定符限定,效果一致 class saler echo saler pi 靜態...

GXT之旅 第七章 MVC MVC重構專案 1

現在我們已經初步了解了gxt mvc,現在我們就要利用此契機,將rssread專案重構一下,使其應用於mvc架構 讓components之間具有良好的一致性,而不是各自的分散開來。為了讓controller可以接收到events,需要使用dispatcher將其註冊。通常情況我們都會在程式入口類,來...