AngularJS中实现日志服务

r囧r小猫 2021-10-19 00:42 278阅读 0赞

本篇体验使用AngularJS自定义一个记录日志的服务。

在AngularJS中，服务的一些写法是这样的：

var app = angular.module('app',[]);
    
    app.provider('providerName', function(){...});
    app.service('serviceName', function(){});
    app.factory('factoryName', function(){});

等同于：

app.config(['$provide', function($provide){
        $provide.provider('providerName', function(){...});
    }])
    
    app.config(['$provide', function($provide){
        $provide.service('serviceName', function(){...});
    }])
    
    app.config(['$provide', function($provide){
        $provide.factory('factoryName', function(){...});
    }])

而实际上，$provider.service()和$provider.factory()也可以通过$provider.provider()以注入的方式实现。

app.config(['$provide', function($provide){
        $provide.service('serviceName', function(){
            this.name = "";
            this.author = "";
        })
    }])

以上等同于：

app.config(['$provide','$injector', function($provide, $injector){
        $provide.provider('serviceName', function(){
           this.$get = function($injector) {
            return $injector.instantiate(function(){
                this.name = "";
                this.author = "";
            });
           }
        });
    }])

以上，也就是说，service本身就是一个provider,可以通过$injector来初始化一个service。  
  
同理，我们这样写factory:

app.config(['$provide', function($provide){
        $provide.factory('factoryName', function(){
            return {name:'', author:''};
        })
    }])

以上等同于：

app.config(['$provide', '$injector',function($provide, $injector){
        $provide.provider('factoryName', function(){
            this.$get = function($injector){
                return $injector.invoke(function(){
                    return {name:'', author:''}
                })
            }
        })
    }])

## 创建自己的provider ##

$provide.provider('appColor', function(){
        var color = 'red';
        
        this.setColor = function(newColor){
            color = newColor;
        }
        
        thi.$get = function(){
            return color;
        }
    })

我们可以在config中使用appColor这个自定义的provider的方法进行一些设置。

app.config(['appColorProvider', function(appColorProvider){
        appColorProvider.setColor('green');
    }])

然后在run中注入appColor这个服务。

app.run(['appColor', funciton(appColor){
        console.log(appColor);
    }])

## 创建日志服务 ##

假设需要的日志格式如下：  
  
<timestamp> - <context>::<method name>('<message>')  
<timestamp> - <context>: <message>  
  
创建一个有关日志的类：

我们可能按如下使用这个日志类：

//Example是类或文件或module的名称
    var logger = Logger.getInstance('Example');
    logger.log('this is a alog');
    logger.warn('warn', 'this is a worn');
    logger.error('this is a {0} error {1}',['big','hello']);

完整代码如下：

app.provider('Logger', [function(){
        var isEnabled = true;
        this.enabled = function(_isEnabled){
            isEnabled = !!_isEnabled;
        }
        
        this.$get = ['$log', function($log){
        
        var Logger = function(context){
            this.context = context;
        }
    
        Logger.getInstance = function(context){
            return new Logger(context);
        }
    
        //替代
        Logger.supplant = function(str, o){
            return str.replace(/\{([^{}]*)\}/g, function(a, b){
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r:a;
            })
        }
    
        //格式化时间
        Logger.getFormattedTimestamp = funciton(date){
            return Logger.supplant('{0}:{1}:{2}:{3}', [
               date.getHours() ,
               date.getMinutes(),
               date.getSeconds(),
               date.getMilleseconds()
            ]);
        }
    
        Logger.prototype = {
            _log: function(originalFn, args){
                if(!isEnabled){
                    return;
                }
            
                var now = Logger.getFormattedTimestamp(new Date());
                var message = '', supplantDate = [];
                switch(args.length){
                    //打印格式：<timestamp> - <context>: <message>
                    case 1:
                        message = Logger.supplant("{0} - {1}:{2}", [now, this.context, args[0]]);
                        break;
                    case 3:
                        //打印格式：<timestamp> - <context>::<method name>('<message>')
                        //第一个参数是方法名
                        //第二个参数是消息
                        //第三各参数是对象
                        supplantData = args[2];
                        message = Logger.supplant("{0} - {1}::{1}(\'{3}\')",[now, this.context, args[0], args[1]]);
                        break;
                    case 2:
                        //检测第二个参数类型
                        if(typeof args[1] === 'string'){
                            message = Logger.supplant("{0} - {1}::{2}(\'{3}\')",[now, this.context, args[0], args[1]]);
                        } else {
                            sup;antData = args[1];
                            message = Logger.supplant("{0} - {1}:{2}", [now, this.context.args[0]])
                        }
                        break;
                }
    
                $log[originalFn].call(null, Logger.supplant(message, suppantData));
            },
            log: function(){
                this._log('log', arguments);
            },
            info: function(){
                this._log('info', arguments);
            },
            warn: function(){
                this._log('warn', arguments);
            },
            debug: function(){
                this._log('debug', argments);
            },
            error: function(){
                this._log('error', arguments);
            }
        };    
            
            return Logger;
        }]
    }])

在全局关闭自定义的Logger。

app.config(['LoggerProvider', function(LoggerProvider){
        LoogerProvider.enabled(false);
    }])

参考：http://www.webdeveasy.com/service-providers-in-angularjs-and-logger-implementation/

转载于:https://www.cnblogs.com/darrenji/p/5192611.html