zoukankan      html  css  js  c++  java
  • 将控制台信息显示在前台页面的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-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()

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

  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/yinn/p/8309893.html
Copyright © 2011-2022 走看看