SuperPlan(6)TaoBao Winner - UI log4javascript

SuperPlan(6)TaoBao Winner - UI log4javascript

10. log4javascript
10.1 Introduction
From my understanding, it is a good way to take care of the javascript Log. It should be better than the console.log.
We have this kind of log Level
log.trace(message[, message2, … ] [, exception])
log.debug(message[, message2, …] [, exception])
log.info
log.error
log.fatal

Some simple examples
log.info("Hello, sillycat");

try{
     throw new Error("Faking error message.");
}catch(e){
     log.error("An error occurred", e);
}

var a = "hello",
var b = 3;
log.debug(a, b);

Logging an Object will directly output an JSON format
var obj = new Object();
obj.name = "hello",
obj.age = 8;
log.info(obj);

10.2 Work it out with My Backbone framework and Chrome
In the Main.js, load the path of log4javascript and log4javascript_custom.
  paths: {
    jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min',
    underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min',
    backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min',
    text: '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.5/text',
    async: 'lib/require/async',
    log4javascript: '//cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.3/log4javascript',
    json2: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2',
    log4javascript_custom: 'lib/log4javascript/log4javascript_custom'

  }

Using and initialize the Log4j class I have created.
require([
  'Router',
  'Config',
  'Log4j',
  'json2'
], function(Router, Config, Log4j){
new Log4j().init();
var IndexPageView = Backbone.View.extend({ el: "#content", router: null, initialize: function(){ window.logger.debug("initialize the IndexPageView and whole system.", "Good Luck."); window.logger.info("Config Start=================================="); window.logger.info(JSON.stringify(new Config())); window.logger.info("Config End===================================="); this.router = new Router(); } }); new IndexPageView();

});

The most magic configuration javascript class Log4j.js will be as follow:


define([
  'jquery',
  'Config',
  'log4javascript',
  'log4javascript_custom'
], function($, Config) {
function Log4j(){
} Log4j.prototype.init = function(){ var config = new Config(); if(config.getLogEnable() == 1){ log4javascript.setEnabled(true); }else{ log4javascript.setEnabled(false); }
var logger = log4javascript.getLogger(); if(config.getLogLevel() == 'debug'){ logger.setLevel(log4javascript.Level.DEBUG); }elseif(config.getLogLevel() == 'all'){ logger.setLevel(log4javascript.Level.ALL); }elseif(config.getLogLevel() == 'info'){ logger.setLevel(log4javascript.Level.INFO); }elseif(config.getLogLevel() == 'error'){ logger.setLevel(log4javascript.Level.ERROR); }
var consoleAppender = new log4javascript.BrowserConsoleAppender(); //%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n //%d{HH:mm:ss} %-5p - %m%n var simpleLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m  %n ");  consoleAppender.setLayout(simpleLayout); logger.addAppender(consoleAppender); window.logger = logger; }; return Log4j;

});

The Config.js is an idea that I want to place all the javascript configuration.


define([
  'jquery'
], function($) {
function Config(){
this.logLevel = 'all'; //info, debug, all this.logEnable = 1; } Config.prototype.setLogLevel = function(logLevel){ this.logLevel = logLevel; }; Config.prototype.getLogLevel = function(){ return this.logLevel; };
Config.prototype.setLogEnable = function(logEnable){ this.logEnable = logEnalbe; };
Config.prototype.getLogEnable = function(){ return this.logEnable; }; return Config;

});

11. BackBone
come soon...

Tips:
1. Always show the line number in log4javascript
log4javascript.js:155

Solution:
Copy some implementation from log4javascript.js and create a file log4javascript_custom.js.

Change the method
define([
'log4javascript'
],function() {

log4javascript.PatternLayout.prototype.format = function(loggingEvent) {
…snip..
case"l": //Location var isChrome = navigator.userAgent.indexOf("Chrome") !== -1; if(isChrome){ //do someting else

var stack = new Error().stack;

…snip…


The detail is in the project easygooglemap/web/js/lib/log4javascript/log4javascript_custom.js.


After that, we will have the debug information like this
13:43:01,112 Router.js:20 DEBUG - init the router, and make backbone start.




References:
log4javascript
http://blog.csdn.net/realcsq/article/details/6695532
http://chenjc-it.iteye.com/blog/1574910
http://log4javascript.org/index.html

log4javascript line number
http://stackoverflow.com/questions/11308239/console-log-wrapper-that-keeps-line-numbers-and-supports-most-methods
https://gist.github.com/leoroos/3441763

BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/

http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner

http://backbonejs.org/#introduction

http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/

http://stackoverflow.com/questions/9914952/backbone-js-complex-model-fetch

BackBone Router
https://github.com/JesterXL/Backbone-Router-Example/tree/master/code/src