本文仅先给使用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,仅此而已,如此简单。