前不久,从Java转到了Ruby,前几天,又从Ruby转到了页面UI。为什么?因为老板的这个项目就我一个人做,苦不堪言。不过还是苦中有乐的,这不,发现了YUI这个好东西。
可以去 这里访问YUI的主页,YUI的一个特定就是漂亮,再一个就是文档详细,看得出来Yahoo花的功夫。我认为在那一堆UI中,Logger是首先应该掌握的,因为它在一定程度上解决了js不好调试的问题。
使用步骤:
1、将必要文件导入到页面中:
前面那个是要用到的CSS,后面是必要的js文件。
2、在页面中设计一个div,用来“装”调试信息:
它不需要任何样式,定位也不需要。
3、然后,使用已定义的CSS样式来美化它。注意,这个样式应该写在此div的父元素上,此处,父元素为body:
4、接着在此div后加上这样一段代码:
这样,这个Logger就可以用了,预览页面,有一个漂亮的信息框。
那么,如何记录调试信息呢?我这里有两个方法,其一,在任意一个js函数调用中,使用类似如下的语句:
这样记录的信息属于Global。其二,在某个js函数的调用中,构造LogWriter对象:
这样记录的信息就专属于一个LogWriter。
在YUI的介绍上,还有LogReader的初始化参数介绍。这里就不写了。
可以去 这里访问YUI的主页,YUI的一个特定就是漂亮,再一个就是文档详细,看得出来Yahoo花的功夫。我认为在那一堆UI中,Logger是首先应该掌握的,因为它在一定程度上解决了js不好调试的问题。
使用步骤:
1、将必要文件导入到页面中:
- <link type="text/css" rel="stylesheet" href="../javascripts/yui/logger/assets/skins/sam/logger.css"/>
- <script type="text/javascript" src="../javascripts/yui/yahoo/yahoo-min.js"></script>
- <script type="text/javascript" src="../javascripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
- <script type="text/javascript" src="../javascripts/yui/dragdrop/dragdrop-min.js"></script>
- <script type="text/javascript" src="../javascripts/yui/logger/logger-min.js"></script>
前面那个是要用到的CSS,后面是必要的js文件。
2、在页面中设计一个div,用来“装”调试信息:
- <div id='debug'></div>
它不需要任何样式,定位也不需要。
3、然后,使用已定义的CSS样式来美化它。注意,这个样式应该写在此div的父元素上,此处,父元素为body:
- <body class="yui-skin-sam">
4、接着在此div后加上这样一段代码:
- <script type="text/javascript">
- var myLogReader = new YAHOO.widget.LogReader("debug");
- </script>
这样,这个Logger就可以用了,预览页面,有一个漂亮的信息框。
那么,如何记录调试信息呢?我这里有两个方法,其一,在任意一个js函数调用中,使用类似如下的语句:
- YAHOO.log("My log message", "warn");
这样记录的信息属于Global。其二,在某个js函数的调用中,构造LogWriter对象:
- var myLogWriter = new YAHOO.widget.LogWriter("myLogWriter");
- myLogWriter.log("This is the 'myLogWriter' info", "info")
这样记录的信息就专属于一个LogWriter。
在YUI的介绍上,还有LogReader的初始化参数介绍。这里就不写了。