給你的網站新增 console.js

顏海鏡發表於2014-11-03
網站JS

本文僅先給使用console除錯的FE同學，如果你還不知道console是什麼，或者還停留在alert階段，那就不要浪費時間了，say bay bay！

你是否試程式的過程中用過console.log(***)，發現在現代瀏覽器裡執行好好的，到了ie裡卻出現莫名其妙的錯誤，你完全不知道為什麼。

或者你知道在ie下console不能使用，每次上線前都要註釋掉console的程式碼，一不小心漏掉了一個。

如果有過上面類似的情況，和我有著同樣的煩惱，那恭喜你，console.js就是為你準備的。（如果你用著非常牛逼的自動化工具，能自動過濾掉console的話，往下看下也是會有收穫的）

你還在寫類似下面這樣的程式碼嗎？

if (console && console.log) {
    console.log(***);
}

或者

console.log = console.log || function () {}

那麼是時候做出改變了，console.js會幫你解決這些問題。

console.js是什麼

console.js是一個微型js庫，用來修復在不支援或部分支援console的瀏覽器下，呼叫console.***出錯的問題。

這其實有點類似reset.css或者html5shim的做法，console.js參考了MSDN MDN Firebug三個文件對console的介紹。是其中提到api的超集。

console.js的全部程式碼如下，這麼簡單的程式碼，還是老規矩不解釋：

;(function(g) {
    'use strict';
    var _console = g.console || {};
    var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'exception', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];

    var console = {version: '0.1.0'};
    var key;
    for(var i = 0, len = methods.length; i < len; i++) {
        key = methods[i];
        console[key] = function (key) {
            return function () {
                if (typeof _console[key] === 'undefined') {
                    return 0;
                }

                Function.prototype.apply.call(_console[key], _console, arguments);
            };           
        }(key);
    }

    g.console = console;
}(window));

小貼士：你知道最前面的分號是幹嘛用的嗎？

其實是為了防止自動化工具拼接js時，前面的js的結尾處忘記了加分號，然後拼接出來的程式碼就掛了。屬於防禦式程式設計。

例如a.js和b.js程式碼如下：

a.js

(function () {
    //...
}())

b.js

(function () {
    //...
}());

上面的程式碼被合後就會變為

(function () {
    //...
}())
(function () {
    //...
}());

這段程式碼執行時就會報錯了，穿插一個小知識點，太小了，無法自成文章。

更多資訊請參考console.js的文件。

僅此而已了嗎？

我一直在思考還可以做哪些改進，或者功能，僅此而已了嗎？當然不是，我能想到的還可以做下面的一些改進。

增加一個對原始console的訪問介面，類似jq的noConflict，或者在現在的console上加一個對原來console的引用。

增加對域名的過濾功能，比如我們可能只希望log資訊在除錯的時候輸出，而線上上時不做輸出。

目前對不支援的介面僅簡單賦值為空函式，可考慮對不支援的介面做模擬，對不支援console功能的瀏覽器，提供自定義模擬console。

當然這些功能是否應該加入console.js，是個問題，應該思考下，console.js的初衷是什麼。。。

不足

對於ie8 9瀏覽器，在首次開啟控制檯時，會新建console物件，現在console.js，盡在頁面載入時做修復，無法解決這個問題。

但對於開啟控制檯的人，絕大多數應該不屬於使用者吧。($ _ $)

總結

console.js 與console就想html5shim於html5，僅此而已，如此簡單。

github地址：https://github.com/yanhaijing/console.js

原文連結

http://yanhaijing.com/js/2014/11/03/use-console.js

相關文章