本文僅先給使用console調(diào)試的FE同學(xué),如果你還不知道console是什么,或者還停留在alert
階段,那就不要浪費(fèi)時(shí)間了,say bye bye!
你是否試程序的過程中用過console.log(***)
,發(fā)現(xiàn)在現(xiàn)代瀏覽器里運(yùn)行好好的,到了ie里卻出現(xiàn)莫名其妙的錯(cuò)誤,你完全不知道為什么。
或者你知道在ie下console不能使用,每次上線前都要注釋掉console的代碼,一不小心漏掉了一個(gè)。
如果有過上面類似的情況,和我有著同樣的煩惱,那恭喜你,console.js就是為你準(zhǔn)備的。(如果你用著非常牛逼的自動(dòng)化工具,能自動(dòng)過濾掉console的話,往下看下也是會(huì)有收獲的)
你還在寫類似下面這樣的代碼嗎?
if (console && console.log) {
console.log(***);
}
或者
console.log = console.log || function () {}
那么是時(shí)候做出改變了,console.js會(huì)幫你解決這些問題。
console.js是一個(gè)微型js庫,用來修復(fù)在不支持或部分支持console的瀏覽器下,調(diào)用console.***
出錯(cuò)的問題。
這其實(shí)有點(diǎn)類似reset.css或者h(yuǎn)tml5shim的做法,console.js參考了MSDN MDN Firebug三個(gè)文檔對(duì)console的介紹。是其中提到api的超集。
console.js的全部代碼如下,這么簡單的代碼,還是老規(guī)矩不解釋:
;(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));
小貼士:你知道最前面的分號(hào)是干嘛用的嗎?
其實(shí)是為了防止自動(dòng)化工具拼接js時(shí),前面的js的結(jié)尾處忘記了加分號(hào),然后拼接出來的代碼就掛了。屬于防御式編程。
例如a.js和b.js代碼如下:
a.js
(function () {
//...
}())
b.js
(function () {
//...
}());
上面的代碼被合后就會(huì)變?yōu)?/p>
(function () {
//...
}())
(function () {
//...
}());
這段代碼執(zhí)行時(shí)就會(huì)報(bào)錯(cuò)了,穿插一個(gè)小知識(shí)點(diǎn),太小了,無法自成文章。
更多信息請(qǐng)參考console.js的文檔。
我一直在思考還可以做哪些改進(jìn),或者功能,僅此而已了嗎?當(dāng)然不是,我能想到的還可以做下面的一些改進(jìn)。
增加一個(gè)對(duì)原始console的訪問接口,類似jq的noConflict,或者在現(xiàn)在的console上加一個(gè)對(duì)原來console的引用。
增加對(duì)域名的過濾功能,比如我們可能只希望log信息在調(diào)試的時(shí)候輸出,而在線上時(shí)不做輸出。
目前對(duì)不支持的接口僅簡單賦值為空函數(shù),可考慮對(duì)不支持的接口做模擬,對(duì)不支持console功能的瀏覽器,提供自定義模擬console。
當(dāng)然這些功能是否應(yīng)該加入console.js,是個(gè)問題,應(yīng)該思考下,console.js的初衷是什么。。。
對(duì)于ie8 9瀏覽器,在首次打開控制臺(tái)時(shí),會(huì)新建console對(duì)象,現(xiàn)在console.js,盡在頁面載入時(shí)做修復(fù),無法解決這個(gè)問題。
但對(duì)于打開控制臺(tái)的人,絕大多數(shù)應(yīng)該不屬于用戶吧。($ _ $)
console.js 與console就想html5shim于html5,僅此而已,如此簡單。
求個(gè)star(⊙o⊙),github地址:https://github.com/yanhaijing/console.js
更多建議: