最近比較吐槽，大家都知道，現(xiàn)在 web 前端相對幾年前來說已經(jīng)變得很重了，各種 js 框架，各種面對對象，而且項目多了，就會提取公共模塊。

這些模塊的 UI 展示都一樣，不一樣的就是后臺邏輯，舉個例子吧，我們做企業(yè)差旅的時候，通常都有一個成本中心的js公共模塊，客戶在預(yù)定機票的時候來填寫這個成本中心，而這種成本中心分布在 online，offline 和 app 等預(yù)定端，這樣也是方便后期和客戶公司進行月結(jié)算。

我們還知道，項目做大了，復(fù)雜化了，SOA 化了之后，很多問題就來了，就像 web 中的一個理論，所有前端的數(shù)據(jù)都是不可信的，那對方團隊的接口數(shù)據(jù)又何嘗不是，以前項目小的時候，不會那么不自信，也只會在 Logic error 的時候會記錄下日志，正常的業(yè)務(wù)流程一般很少記錄，畢竟 info 日志看著不美觀，而且還會消耗服務(wù)器帶寬，也還會拖累 web 的性能。

但是項目大了，當你某天在項目中遇到了奇怪的 bug 時，你靠著殘缺不全的日志，好不容易用肉眼逐行追溯到了接口，但是參數(shù)太多，無法準確的還原接口的參數(shù)數(shù)據(jù)，但是你又100%的自信認定肯定就是接口的返回問題，但是又拿不出完整的報文，這時候你又沒法找接口提供方，當時那個無奈呀，多想最好每行都有日志該多好啊。

有了教訓(xùn)后，記流程日志的趨勢越來越盛行，最終也釀造了一個年初的大事件，稀里糊涂的說了一大堆，web 后端如此，那現(xiàn)在的重前端不也一樣要記錄日志么？我們知道既然是公共的 js 模塊，那這個模塊肯定自己封裝了一些方法，肯定是絕對不可以讓第三方程序去操作它自己的文本結(jié)點，比如下面這樣：

[js] view plaincopy
<!--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 結(jié)點，并且封裝了一個 costcenter 類來提供讀取方法，可以看到，我的預(yù)定程序只需讀取 costCenter.getInfo就好了，也起到了一個封裝的作用。

但是問題就出現(xiàn)在這里，項目實戰(zhàn)中會因為各種原因?qū)е略?costcenter 中取不到值，當然也可能是 common ui的 bug。

但是當時你又不能非常確定是否真的取到了值，但是在邏輯上就算取不到值，原則上你也不能阻止訂單提交，所以為了徹底追蹤 bug，就寫了個 logCenter 單例類來記錄日志。通常用js 來記錄 log 有這種方法。

ajax

這種方式很容易想到，但是你使用原生的 xmlhttprequest 的話，還需要考慮瀏覽器兼容，但不用原生的話，就要借助于第三方框架，比如 jquery，但是畢竟還是有很多公司是不使用 jquery 的，所以這個要根據(jù)實際的需要來使用了。

[js] view plaincopy
//日志中心  

    var logCenter = (function () {  

        var result = {  

            info: function (title, message) {  

                //ajax操作  

                $.get("<a  target="_blank">http://xxx.com</a>", { "title": title, "message": message }, function () {  

                }, "post");  

             }  

         };  

         return result;  

     })();  

image

我們的 dom 中有一個叫做 image 的對象，所以可以通過動態(tài)給它的 src 賦值來達到請求后臺 url 的目的，同時在 url 中加上我們需要傳遞 title 和 message 信息，這種動態(tài)給 image.src 的方式是不需要考慮瀏覽器兼容性的問題，非常不錯。

[js] view plaincopy
//日志中心  

    var logCenter = (function () {  

        var result = {  

            info: function (title, message) {  

                //ajax操作  

                $.get("<a  target="_blank">http://xxx.com</a>", { "title": title, "message": message }, function () {  

                }, "post");  

             },  

             info_image: function (title, message) {  

                 //image  

                 var img = new Image();  

                 img.src = "<a  target="_blank">http://www.baidu.com?title</a>=" + title + "&message=" + message + "&temp=" + (Math.random() * 100000);  

             }  

         };  

         return result;  

     })();  

以上就是本文的主要內(nèi)容了，后續(xù)我們將繼續(xù)深入探討