JSLog：簡潔高效的前端日誌管理工具

前端日誌是我們開發過程中非常重要的一部分。在生產環境的應用中，通過日誌可以快速排查錯誤、追蹤用戶行為、優化性能等。JSLog是一款基於JavaScript的前端日誌管理工具，它具有簡潔高效、配置靈活、易於使用等特點。本文將從多個方面對JSLog進行詳細闡述。

一、快速上手

使用JSLog非常簡單，只需要引入JS文件，然後在需要記錄日誌的地方調用JSLog即可：

    
    <script src="jslog.js"></script>
    JSLog.debug('這是一條debug信息');
    JSLog.info('這是一條info信息');
    JSLog.warn('這是一條warn信息');
    JSLog.error('這是一條error信息');
    

JSLog的四個接口分別是debug、info、warn、error，對應不同級別的信息。通過在瀏覽器控制台中打印JSLog對象可以查看當前日誌等級：

    
    console.log(JSLog);
    // 輸出: {debug: true, info: true, warn: true, error: true, ...}
    

在需要輸出日誌的地方，我們只需要調用相應接口即可。默認情況下，debug級別以上的信息都會被輸出到控制台。如需更多配置，可以通過JSLog的configure方法進行配置：

    
    JSLog.configure({
        logLevel: 'warn', // 只輸出warn及以上級別的信息
        enableStackTrace: true, // 輸出堆棧信息
        enableStore: true // 存儲日誌到localStorage
    });
    

二、配置靈活

除了以上配置外，JSLog還支持以下配置：

1. 輸出格式配置

通過JSLog的messageFormat屬性可以設置輸出格式。默認情況下，輸出格式如下：

    
    {
        type: 'debug',
        message: '這是一條debug信息',
        timestamp: 1635287260360
    }
    

我們可以通過自定義函數來設置輸出格式：

    
    JSLog.configure({
        messageFormat: function(logItem) {
            return `[${logItem.type}] ${logItem.message} (${new Date(logItem.timestamp)})`;
        }
    });
    

以上代碼將會把輸出格式改為：'[debug] 這是一條debug信息 (2021-10-27T09:34:20.360Z)’。

2. 控制台輸出格式配置

通過JSLog的consoleFormat屬性可以設置控制台輸出格式。默認情況下，控制台輸出格式為：

    
    console.log(`${logItem.type.toUpperCase()}:`, logItem.message);
    

我們可以通過自定義函數來設置控制台輸出格式：

    
    JSLog.configure({
        consoleFormat: function(logItem) {
            return `${logItem.type.toUpperCase()}: ${logItem.message}`;
        }
    });
    

以上代碼將會把控制台輸出格式改為：’DEBUG: 這是一條debug信息’。

3. 自定義擴展

我們可以通過JSLog的extend方法自定義擴展，擴展內容可以是任意類型的對象、函數等。

    
    JSLog.extend({
        getUserAgent: function() {
            return navigator.userAgent;
        },
        getVersion: function() {
            return '1.0.0';
        }
    });

    JSLog.info(`UserAgent: ${JSLog.getUserAgent()}`);
    JSLog.info(`Version: ${JSLog.getVersion()}`);
    

以上代碼自定義了getUserAgent和getVersion兩個擴展方法，在日誌中可以直接使用。通過擴展，我們可以把更多的信息記錄到日誌中，方便排查問題。

三、簡潔高效

JSLog本身非常簡潔，代碼只有幾行，非常易於維護。

    
    var JSLog = (function() {
        var levels = ['debug', 'info', 'warn', 'error'];
        var defaultConfig = {
            logLevel: 'debug',
            enableStackTrace: false,
            enableStore: false,
            messageFormat: function(logItem) {
                return logItem;
            },
            consoleFormat: function(logItem) {
                console.log(`${logItem.type.toUpperCase()}:`, logItem.message);
            }
        };
        var config = defaultConfig;
        var logs = [];
    
        function configure(options) {
            config = Object.assign({}, defaultConfig, options);
        }
    
        function extend(obj) {
            Object.assign(JSLog, obj);
        }
    
        function log(type, message, stackTrace) {
            var index = levels.indexOf(config.logLevel);
            if (levels.indexOf(type) >= index) {
                var logItem = {
                    type: type,
                    message: message,
                    timestamp: Date.now()
                };
                if (stackTrace && config.enableStackTrace) {
                    logItem.stackTrace = stackTrace;
                }
                config.consoleFormat(config.messageFormat(logItem));
                if (config.enableStore) {
                    logs.push(logItem);
                    localStorage.setItem('JSLog', JSON.stringify(logs));
                }
            }
        }
    
        return {
            debug: function(message, stackTrace) {
                log('debug', message, stackTrace);
            },
            info: function(message, stackTrace) {
                log('info', message, stackTrace);
            },
            warn: function(message, stackTrace) {
                log('warn', message, stackTrace);
            },
            error: function(message, stackTrace) {
                log('error', message, stackTrace);
            },
            configure: configure,
            extend: extend
        };
    })();
    

JSLog的代碼非常簡潔，但又充分考慮了靈活性和可擴展性。通過配置，可以滿足不同場景下的需求；通過擴展，可以把更多的信息記錄到日誌中，方便排查問題。

四、總結

JSLog是一款簡潔高效、配置靈活、易於使用的前端日誌管理工具。它的代碼簡潔明了，通過配置和擴展，可以滿足不同場景下的需求。在開發過程中，JSLog可以幫助我們快速排查錯誤、追蹤用戶行為、優化性能等，是前端開發過程中不可或缺的工具之一。