SuperPlan(6)TaoBao Winner - UI log4javascript

SuperPlan(6)TaoBaoWinner-UIlog4javascript

10.log4javascript

10.1Introduction

Frommyunderstanding,itisagoodwaytotakecareofthejavascriptLog.Itshouldbebetterthantheconsole.log.

WehavethiskindoflogLevel

log.trace(message[,message2,…][,exception])

log.debug(message[,message2,…][,exception])

log.info

log.error

log.fatal

Somesimpleexamples

log.info("Hello,sillycat");

try{

thrownewError("Fakingerrormessage.");

}catch(e){

log.error("Anerroroccurred",e);

}

vara="hello",

varb=3;

log.debug(a,b);

LogginganObjectwilldirectlyoutputanJSONformat

varobj=newObject();

obj.name="hello",

obj.age=8;

log.info(obj);

10.2WorkitoutwithMyBackboneframeworkandChrome

IntheMain.js,loadthepathoflog4javascriptandlog4javascript_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'

}

UsingandinitializetheLog4jclassIhavecreated.

require([

'Router',

'Config',

'Log4j',

'json2'

],function(Router,Config,Log4j){

newLog4j().init();

varIndexPageView=Backbone.View.extend({el:"#content",router:null,initialize:function(){window.logger.debug("initializetheIndexPageViewandwholesystem.","GoodLuck.");window.logger.info("ConfigStart==================================");window.logger.info(JSON.stringify(newConfig()));window.logger.info("ConfigEnd====================================");this.router=newRouter();}});newIndexPageView();

});

ThemostmagicconfigurationjavascriptclassLog4j.jswillbeasfollow:

define([

'jquery',

'Config',

'log4javascript',

'log4javascript_custom'

],function($,Config){

functionLog4j(){

}Log4j.prototype.init=function(){varconfig=newConfig();if(config.getLogEnable()==1){log4javascript.setEnabled(true);}else{log4javascript.setEnabled(false);}

varlogger=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);}

varconsoleAppender=newlog4javascript.BrowserConsoleAppender();//%d{HH:mm:ss,SSS}%l{s:l}%-5p-%m{1}%n//%d{HH:mm:ss}%-5p-%m%nvarsimpleLayout=newlog4javascript.PatternLayout("%d{HH:mm:ss,SSS}%l{s:l}%-5p-%m%n");consoleAppender.setLayout(simpleLayout);logger.addAppender(consoleAppender);window.logger=logger;};returnLog4j;

});

TheConfig.jsisanideathatIwanttoplaceallthejavascriptconfiguration.

define([

'jquery'

],function($){

functionConfig(){

this.logLevel='all';//info,debug,allthis.logEnable=1;}Config.prototype.setLogLevel=function(logLevel){this.logLevel=logLevel;};Config.prototype.getLogLevel=function(){returnthis.logLevel;};

Config.prototype.setLogEnable=function(logEnable){this.logEnable=logEnalbe;};

Config.prototype.getLogEnable=function(){returnthis.logEnable;};returnConfig;

});

11.BackBone

comesoon...

Tips:

1.Alwaysshowthelinenumberinlog4javascript

log4javascript.js:155

Solution:

Copysomeimplementationfromlog4javascript.jsandcreateafilelog4javascript_custom.js.

Changethemethod

define([

'log4javascript'

],function(){

log4javascript.PatternLayout.prototype.format=function(loggingEvent){

…snip..

case"l"://LocationvarisChrome=navigator.userAgent.indexOf("Chrome")!==-1;if(isChrome){//dosometingelse

varstack=newError().stack;

…snip…

Thedetailisintheprojecteasygooglemap/web/js/lib/log4javascript/log4javascript_custom.js.

Afterthat,wewillhavethedebuginformationlikethis

13:43:01,112Router.js:20DEBUG-inittherouter,andmakebackbonestart.

References:

log4javascript

http://blog.csdn.net/realcsq/article/details/6695532

http://log4javascript.org/index.html

log4javascriptlinenumber

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

BackBoneRouter

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