終於可來搞一搞日誌模組的原始碼了，其實程式碼都很簡單（哈哈哈），我開了一下git的日誌，想來我們現在看到的程式碼，都是之前迭代的程式碼，不是一開始，一個函式就很多行程式碼的，所以要理清條路，理解為什麼這樣加程式碼，當然能一開始就分清楚函式定義多少個，後面好加程式碼，擴充套件的 這個思路架構也是我們要瞻仰，學習的。
log這個模組的類圖結構知道，它在VConsolePlugin上又封裝了一層，類圖結構件上一篇文章上一篇文章
即VConsoleLogTab 作為一個log模組基礎的類結構
廢話不多說直接貼程式碼看實現，程式碼才是王道

什麼建構函式和初始化就不說了，直接來看怎麼替代js瀏覽器物件的列印

/**
     * replace window.console with vConsole method
     * @private
     */
    mockConsole() {
        const that = this;
        const methodList = ['log', 'info', 'warn', 'debug', 'error'];
        if (!window.console) {
            window.console = {};
        } else {
            methodList.map(function
 
(method) {
                that.console[method] = window.console[method];
            });
            that.console.time = window.console.time;
            that.console.timeEnd = window.console.timeEnd;
            that.console.clear = window.console.clear;
        }

        methodList.map(method =>
 
 {
            window.console[method] = (...args) => {
                this.printLog({
                    logType: method,
                    logs: args
                });
            };
        });

        const timeLog = {}
        window.console.time = function(label) {
            timeLog[label] = Date.now();
        };
        window.console.timeEnd = function(label) {
            var pre = timeLog[label];
            if (pre) {
                console.log(label + ':', (Date.now() - pre) + 'ms');
                delete timeLog[label];
            } else {
                console.log(label + ': 0ms');
            }
        };

        window.console.clear = (...args) => {
            that.clearLog();
            that.console.clear.apply(window.console, args);
        };
    }

該方法就是模擬console物件

• 判斷window的console物件是否存在
• 如果不存在就讓console = {},for迴圈自己實現，console的erron,log等方法，
• 如果存在，劫持console.log的各個方法，將方法儲存在that物件中，其實我也不知道這個是個什麼意思，我覺得這個劫持可以不要，反正你後面都是全部自己實現了log，error,warn,clear,time,timeEnd，等方法，不知道作者這裡是個什麼意思

這樣差不多log模組畢，接下來看看network,這裡就不賣關子了，其實網路請求也是通過類似於日誌模組模擬ajax的方式。

在此之前，來梳理下window.XMLHttpRequest物件的網路請求流程

1. 在後臺與伺服器交換資料，就會用到XMLHttpRequest物件
2. 網路請求發生時，先回建立XMLHttpRequest物件即readyState = 0 也是呼叫open()方法
3. 緊接著XMLHttpRequest物件呼叫send()方法，傳送客戶端網路請求，等待伺服器返回，即readyState的值為1 ，2，3的變化中（其中何時變化為何值可以參考下https://www.cnblogs.com/liujiale/p/5388110.html）
4. 再次XMLHttpRequest等待伺服器響應完畢,readyState為4
   注意這個onreadystatechange這個事件很重要，每當readyState值變化是都會觸發這個方法，在這個方法我們就可以取用XMLHttpRequest物件的一些有用的屬性值來做文章了比如responseText，status等
   所以瞭解了這個過程，在來看下面的程式碼就很簡單，說白了就是重寫了send，open，onreadystatechange等方法

  /**
     * mock ajax request
     * @private
     */
    mockAjax() {
        let _XMLHttpRequest = window.XMLHttpRequest;
        if (!_XMLHttpRequest) { return; }
        //將this儲存起來
        let that = this;
        let _open = window.XMLHttpRequest.prototype.open,
            _send = window.XMLHttpRequest.prototype.send;
        that._open = _open;
        that._send = _send;

        // 模擬XMLHttpRequest的open方法
        window.XMLHttpRequest.prototype.open = function() {
            let XMLReq = this;
            //分割請求的引數
            let args = [].slice.call(arguments),
                method = args[0],
                url = args[1],
                id = that.getUniqueID(); //設定一個值儲存當前請求的唯一id，唯一標識
            //定義一個時間計時器
            let timer = null;

            // may be used by other functions
            XMLReq._requestID = id;
            XMLReq._method = method;
            XMLReq._url = url;

            //  模擬XMLHttpRequest的onreadystatechange
            let _onreadystatechange = XMLReq.onreadystatechange || function() {};
            let onreadystatechange = function() {
                let item = that.reqList[id] || {};
                // update status
                item.readyState = XMLReq.readyState;
                item.status = 0;
                if (XMLReq.readyState > 1) {
                    item.status = XMLReq.status;
                }
                item.responseType = XMLReq.responseType;

                if (XMLReq.readyState == 0) {
                    // UNSENT
                    if (!item.startTime) {
                        item.startTime = (+new Date());
                    }
                } else if (XMLReq.readyState == 1) {
                    // OPENED
                    if (!item.startTime) {
                        item.startTime = (+new Date());
                    }
                } else if (XMLReq.readyState == 2) {
                    // HEADERS_RECEIVED
                    item.header = {};
                    let header = XMLReq.getAllResponseHeaders() || '',
                        headerArr = header.split("\n");
                    // extract plain text to key-value format
                    for (let i = 0; i < headerArr.length; i++) {
                        let line = headerArr[i];
                        if (!line) { continue; }
                        let arr = line.split(': ');
                        let key = arr[0],
                            value = arr.slice(1).join(': ');
                        item.header[key] = value;
                    }
                } else if (XMLReq.readyState == 3) {
                    // LOADING
                } else if (XMLReq.readyState == 4) {
                    // DONE
                    clearInterval(timer);
                    item.endTime = +new Date(),
                        item.costTime = item.endTime - (item.startTime || item.endTime);
                    item.response = XMLReq.response;
                } else {
                    clearInterval(timer);
                }

                if (!XMLReq._noVConsole) {
                    that.updateRequest(id, item);
                }
                return _onreadystatechange.apply(XMLReq, arguments);
            };
            //覆蓋原始預設的onreadystatechange
            XMLReq.onreadystatechange = onreadystatechange;
            //為了怕請求過程佔用第三方應用匯修改xhr預設的方法，所以用了一個定時器迴圈來監聽readyState的變化
            let preState = -1;
            timer = setInterval(function() {
                if (preState != XMLReq.readyState) {
                    preState = XMLReq.readyState;
                    onreadystatechange.call(XMLReq);
                }
            }, 10);

            return _open.apply(XMLReq, args);
        };

        // 預設send方法
        window.XMLHttpRequest.prototype.send = function() {
            let XMLReq = this;
            let args = [].slice.call(arguments),
                data = args[0];
            //重請求池找出相應的請求
            let item = that.reqList[XMLReq._requestID] || {};
            item.method = XMLReq._method.toUpperCase();
            //處理url後面跟著的引數，
            //1,先以？分割為陣列
            let query = XMLReq._url.split('?'); // a.php?b=c&d=?e => ['a.php', 'b=c&d=', '?e']
            // 2,在去除最前面的陣列
            item.url = query.shift(); // => ['b=c&d=', '?e']
            if (query.length > 0) {
                item.getData = {};
                //3,然後剩下的？又重新連線在一起
                query = query.join('?'); // => 'b=c&d=?e'
                //4,在以& 去鍵值對
                query = query.split('&'); // => ['b=c', 'd=?e']
                for (let q of query) {
                    q = q.split('=');
                    item.getData[q[0]] = q[1];
                }
            }
            //處理post請求方式，注意這裡 會有url接引數，但又是post請求的情況，這裡也能處理
            if (item.method == 'POST') {
                // save POST data
                if (tool.isString(data)) {
                    let arr = data.split('&');
                    item.postData = {};
                    for (let q of arr) {
                        q = q.split('=');
                        item.postData[q[0]] = q[1];
                    }
                } else if (tool.isPlainObject(data)) {
                    item.postData = data;
                }

            }

            if (!XMLReq._noVConsole) {
                that.updateRequest(XMLReq._requestID, item);
            }

            return _send.apply(XMLReq, args);
        };

    };

這個就比較底層了，其實也不是，只不過我們平時開發的時候，習慣用封裝好的比如jq等，其實背後做了很多時候事情！

接下來是最後的儲存模組，VConsole裡主要是列了cookie和localStorage的儲存
localStorage就不說了，貼心cookie的的程式碼

  getCookieList() {
    if (!document.cookie || !navigator.cookieEnabled) {
      return [];
    }

    let list = [];
    let items = document.cookie.split(';');
    for (let i=0; i<items.length; i++) {
      let item = items[i].split('=');
      let name = item.shift().replace(/^ /, ''),
          value = item.join('=');
      list.push({
        name: decodeURIComponent(name),
        value: decodeURIComponent(value)
      });
    }
    return list;
  }

結束了，以上是個人見解，歡迎指正批評！謝謝