YUI中logger的用法

trace

浏览: 125467 次
性别:
来自: 上海

最近访客更多访客>>

tobesn

north0808

429243408

lleelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

YUI JavaScript Yahoo CSS Ruby

       前不久，从Java转到了Ruby，前几天，又从Ruby转到了页面UI。为什么？因为老板的这个项目就我一个人做，苦不堪言。不过还是苦中有乐的，这不，发现了YUI这个好东西。

       可以去这里访问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的初始化参数介绍。这里就不写了。

分享到：

利用YUI创建简单的右键菜单 | 在dojo框架下实现js的面向对象编程

2007-09-14 21:08
浏览 3985
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论