在拿出插件之前，先回顾一下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()
销毁插件并恢复原来的控制台显示。