将控制台信息显示在前台页面的js插件

在拿出插件之前，先回顾一下apply()的用法，这里和call()做比较。

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它们各自的定义：

apply：应用某一对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，以另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处：

都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处：

apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。并且apply具有打散参数的作用。

call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

以上只为更好的理解代码，下面看代码：

<script>
//插件
(function () {
/*
* logEl 输出的容器element
* isInitialized 是否初始化
* _console
*/
var logEl,
isInitialized = false,
_console = {};

/*
* 创建元素
* tag 标签名称
* css 样式
*/
function createElement( tag, css ) {
var element = document.createElement( tag );
element.style.cssText = css;
return element;
}

/*
* 生成面板
* options 自定义样式对象
*/
function createPanel(options) {
options.bgColor = options.bgColor || 'black';
options.color = options.color || 'lightgreen';
options.css = options.css || '';
var div = createElement( 'div', 'font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' + options.bgColor + ';color:' + options.color + ';' + options.css);
return div;
}

/*
* 日志信息，自定义log方法
*/
function log() {
var el = createElement( 'div', 'line-height:18px;background:' + (logEl.children.length % 2 ? 'rgba(255,255,255,0.2)' : '')); // zebra lines
var val = [].slice.call(arguments).reduce(function(prev, arg) {//
return prev + ' ' + arg;
}, '');
el.textContent = val;

logEl.appendChild(el);
// Scroll to last element
logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
}

/*
* 清空控制台
*/
function clear() {
logEl.innerHTML = '';
}

/*
* 初始化插件，可以添加附加选项
*/
function init(options){
if (isInitialized) { return; }

isInitialized = true;
options = options || {};
logEl = createPanel(options);
document.body.appendChild(logEl);

if (!options.freeConsole) {
// 同步打印更新
_console.log = console.log;
_console.clear = console.clear;

console.log = originalFnCallDecorator(log, 'log');
console.clear = originalFnCallDecorator(clear, 'clear');
}
}

/*
* 销毁插件并恢复原来的控制台显示
*/
function destroy() {
isInitialized = false;
console.log = _console.log;
console.clear = _console.clear;
logEl.remove();
}

/*
* 验证初始化
*/
function checkInitialized(){
if (!isInitialized){
throw 'You need to call `screenLog.init()` first.';
}
}

function checkInitDecorator(fn){
return function(){
checkInitialized();
return fn.apply(this, arguments);
};
}

/*
* 包含前台打印和后台打印
*/
function originalFnCallDecorator(fn, fnName) {
return function(){
//前台打印
fn.apply(this, arguments);
if (typeof _console[fnName] === 'function') {
//后台打印
_console[fnName].apply(console, arguments);
}
};
}

window.screenLog = {
init: init,
log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
destroy: checkInitDecorator(destroy)
};
})();

</script>

<script>
screenLog.init();
screenLog.log('String: Hello world');
screenLog.log(21, 'multiple arguments');
screenLog.log('Arrays', [1, 2, 3]);
console.log('console.log also gets logged.');

var i = 20;
function log() {
console.log('console log', Date.now());
if (--i) { setTimeout(log, 1000); }
}
log();
</script>

运行代码

使用方法：

1.初始化插件

在页面中引入screenlog.js文件。然后通过下面的方法来初始化该插件。

screenLog.init([option]);

初始化方法有一个附加选项option：

color：可自定义文本颜色

bgColor：可自定义背景颜色

freeConsole：默认情况下console.log会被在屏幕上重写。你可以通过设置freeConsole为

true

，并使用

screenLog.log()

api来避免这种情况的发生。默认为

false

。

2.screenLog.log(obj1[,obj2,obj2...,objn])

在屏幕上显示的log信息。

obj1...objn:要被输出的一组JavaScript对象或字符串。

3.screenLog.clear()

清空屏幕上的log信息。

4.screenLog.destory()

销毁插件并恢复原来的控制台显示。