最近比較吐槽，大家都知道，現在web前端相對幾年前來說已經變得很重了，各種js框架，各種面對物件，而且專案多了，就會提取公共模組，這些模組的UI展示都一樣，不一樣的就是後臺邏輯，舉個例子吧，我們做企業差旅的時候，通常都有一個成本中心的js公共模組，客戶在預定機票的時候來填寫這個成本中心，而這種成本中心分佈在online，offline和app等預定端，這樣也是方便後期和客戶公司進行月結算。
我們還知道，專案做大了，複雜化了，SOA化了之後，很多問題就來了，就像web中的一個理論，所有前端的資料都是不可信的，那對方團隊的介面資料又何嘗不是，以前專案小的時候，不會那麼不自信，也只會在Logic error的時候會記錄下日誌，正常的業務流程一般很少記錄，畢竟info日誌看著不美觀，而且還會消耗伺服器頻寬，也還會拖累web的效能，但是專案大了，當你某天在專案中遇到了奇怪的bug時，你靠著殘缺不全的日誌，好不容易用肉眼逐行追溯到了介面，但是引數太多，無法準確的還原介面的引數資料，但是你又100%的自信認定肯定就是介面的返回問題，但是又拿不出完整的報文，這時候你又沒法找介面提供方，當時那個無奈呀，多想最好每行都有日誌該多好啊，有了教訓後，記流程日誌的趨勢越來越盛行，最終也釀造了一個年初的大事件，稀裡糊塗的說了一大堆，web後端如此，那現在的重前端不也一樣要記錄日誌麼？我們知道既然是公共的js模組，那這個模組肯定自己封裝了一些方法，肯定是絕對不可以讓第三方程式去操作它自己的文字結點，比如下面這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!--third module --> 公司：<input type="text" id="company" value="xxx有限公司" /> 員工姓名：<input type="text" id="username" value="張三" /> <!-- --> <script type="text/javascript"> //成本中心 var costCenter = (function () { var company = (document.getElementById("company") || "") && document.getElementById("company").value; var username = (document.getElementById("username") || "") && document.getElementById("username").value; var result = { getInfo: function () { return { company: company, username: username }; }, validation: function () { return Boolean(company && username); } }; return result; })(); </script> |
為了簡化操作，第三方UI提供了公司名和員工姓名的UI結點，並且封裝了一個costcenter類來提供讀取方法，可以看到，我的預定程式只需讀取costCenter.getInfo就好了，也起到了一個封裝的作用，但是問題就出現在這裡，專案實戰中會因為各種原因導致在costcenter中取不到值，當然也可能是common ui的bug，但是當時你又不能非常確定是否真的取到了值，但是在邏輯上就算取不到值，原則上你也不能阻止訂單提交，所以為了徹底追蹤bug，就寫了個logCenter單例類來記錄日誌。通常用js來記錄log有這種方法。
<1> ajax
這種方式很容易想到，但是你使用原生的xmlhttprequest的話，還需要考慮瀏覽器相容，但不用原生的話，就要藉助於第三方框架，比如jquery，但是畢竟還是有很多公司是不使用jquery的，所以這個要根據實際的需要來使用了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//日誌中心 var logCenter = (function () { var result = { info: function (title, message) { //ajax操作 $.get("http://xxx.com", { "title": title, "message": message }, function () { }, "post"); } }; return result; })(); |
<2>image
我們的dom中有一個叫做image的物件，所以可以通過動態給它的src賦值來達到請求後臺url的目的，同時在url中加上我們需要傳遞 title和message資訊，這種動態給image.src的方式是不需要考慮瀏覽器相容性的問題，非常不錯。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//日誌中心 var logCenter = (function () { var result = { info: function (title, message) { //ajax操作 $.get("http://xxx.com", { "title": title, "message": message }, function () { }, "post"); }, info_image: function (title, message) { //image var img = new Image(); img.src = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.random() * 100000); } }; return result; })(); |
從上圖中我們看到network中已經有了url請求，伺服器端就可以querystring下url的引數，然後就可以開開心心的把日誌記錄下來，供後續我們徹底的排查js前端中的流程資訊，到時候誰都不可以扯皮。