Make Delicious Web Pages …
这部分的实质就是在eclipse中安装java开发环境
具体步骤如下:
1. 
2. 源地址（没有的话添加一个）：http://download.eclipse.org/releases/galileo
安装：
http://yuilibrary.com/downloads/#yuicompressor
解压缩之后将yuicompressor-x.y.z.jar解压到你想放的位置，要记下绝对路径哦！
作为前端工程师，我们工作的成果是什么呢？
没错，是代码。可是，只是代码就可以么？我觉得不是这样的，我们的代码想要让自己以后容易明白，需要清晰的注释;想要让别人理解，更需要完善的文档。因此，代码和文档都是软件工程师工作中非常重要的内容。
可是，为什么我们仍然会看到很多不完善的文档，甚至是错误的文档呢？因为，没人会说，为代码编写文档是件轻松的工作。而当你修改了代码，修复了一个BUG的时候，往往不能及时的将相关的文档更新，同步文档就成为了另一个恼人的工作。
此时，我们就需要一个工具，来自动的生成文档，来方便的同步文档。
幸好工程师一般都有很好的书写注释的习惯，而现在，就有几种工具，可以根据注释的内容来生成文档。
YUIDoc就是其中之一，相对于功能相似的JSDoc,YUIDoc基于PYTHON而不是JAVA，更加轻量，易配置。
下面，就让我们来看一下怎么开始使用YUIDoc来创建文档。
以下标签每段注释至少都要有一个：
module, class, property, event,method
以上这五个标签都需要在第一行注释写上描述的内容，如下：
/**
* My method description.
* this can span multiple lines.
* @method methodName
*/
除了constructor, public, private, static，其它的标签如果没写名称都会有警告。
将module标签放在组件文件中，它的描述将会出现这个组件的初始页面上。
注：至少需要一个@module标签
/**
*这段注释应该尽量放在文件最前面
*这里是描述，支持多行
*@module 模块名称
*@requires xxx, xxx, xxx 依赖的模块的名称
*/
/**
*这里是描述，支持多行
*@class 类名称
*@constructor 这里可以不用写东西，表示这个类是可以实例化的
*@static 如果这个类没有constructor,则要加static
*@param 参数名 {参数类型} 参数的说明
*@param 参数名 {参数类型} 第二个参数
*@return {返回类型} 返回值的说明
*@private/protected 不写本行表示为publi
*/
/**
*这里是描述，支持多行
*@method 方法名
*@param 参数名 {参数类型} 参数的说明
*@param 参数名 {参数类型} 第二个参数
*@return {返回类型} 返回值的说明
*@private/protected/static
*/
没有return
param 传递给事件监听函数
/**
*这里是描述，支持多行
*@event 事件名称
*@param 参数名 {参数类型} 参数的说明
*/
/**
*这里是描述，支持多行
*@property 属性名
*/
今天有个需求：去掉一段HTML代码中除了P标签以外所有的标签，P标签的属性也要全部去掉。
然后想到了好久不用的正则表达式（现在基本什么都不记得了，全是现查现用）
整理一下这个纠结的过程：
思路：查出所有非P标签，并替换成空字符;然后匹配出P标签中的属性，并删除。
上网查到了匹配标签的正则：/<[^>]+>/gi
第一个思路：直接改成匹配所有非P标签(假设没有其它<p开头的标签，当然也要排除</p开头的标签)的正则
于是得到这样一个结果：/<[^p][^>]*[^(\/p\s*)]>/gi
这里我承认：我很傻很天真
一眼看去：[^(\/p\s*)]括号里的东西应该是一个整体，但是括号在方括号里是没有效果的。
要达到排除\/p\s*的效果，可以用(?!\/p\s*)来排除\/p\s*所匹配出的内容，在这里出现了另一个问题
对于但由于第一个字符用[^p]来排除了p,所以换成上面这种方案还是无法正确的排除</p>这种标签。
于是便放弃了这种方案，改用另一种思路：
在介绍新的思路以前，可以先看一下w3cschool关于replace方法的介绍。
思路大概就是先把所有的标签选出来，再根据标签的内容做不同的处理。
代码在下面：
var reg = /<[^>]+>/gi;
var str = '<P><FONT style="BACKGROUND-COLOR: #9900ff" face=黑体 color=#ff0000 size=2><STRONG><EM><SPAN style="TEXT-DECORATION: underline"><SPAN style="TEXT-DECORATION: line-through"> xxxw 我我我饿哦操刀佛打算偶发是的哦发生的哦佛阿斯地方 </SPAN></SPAN></EM></STRONG></FONT></P> <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"> <P>w我我我饿哦操刀佛打算偶发是的哦发生的哦佛阿斯地方 </P></BLOCKQUOTE> <P align=right>w我我我饿哦操刀佛打算偶发是的哦发</P> <P align=left>生的哦佛阿斯地方 <IMG alt="" src="http://a.tbcdn.cn/sys/wangwang/smiley/48x48/0.gif"></P> <P align=left> </P >xxxxxx<IMG src="http://img04.daily.taobaocdn.net/imgextra/i4/175754965/T2DFlcXlNaXXXXXXXX_!!175754965.jpg_100x100.jpg">';
var t = str.replace(reg,function($0){
if(/<p/i.test($0)||/<\/p/i.test($0)){
if(/<p/i.test($0))return "<p>"
else return $0
}else{
return ""
}
});
alert(t);
不过还是很纠结于第一种思路，有时间还是要仔细研究一下。
这个星期因为页面紧急上线，没经过很充分的测试就上去了，结果出了不少问题，其中比较诡异的一个就是a标签在IE6下的一个奇怪的BUG。
这个BUG发生在页面顶部的导航里，这块有很多A标签，由于表现形式的需要，在不同位置的a标签的父级标签上都有不同的class,然后杯具的事情就发生了。
BUG具体表现是：
1.打开页面的时候，父级class定义的a标签的样式，有一部分生效，一部分失效。
2.在我的电脑上，样式失效的a标签和我同事电脑上IE6中失效的a标签不是同样的。
由于有高手在场，问题原因很快被找出来了：
全局定义中单独定义了a:visited的样式, 我写样式的时候只是类似写了.xxx a{}这样的定义。
在其它浏览器中，这样的定义会覆盖全局定义的:link, :visited, :hover, :active这几个伪类的样式。而在IE6中如果全局样式的定义中单独定义了伪类的样式，优先级是高于.xxx a{}这样的定义;
解决方案：
定义.xxx a:visited的样式。
下面做了简单的试验：
<style>
a {color:red; margin-left:10px; display:block}
.div a {color:blue; margin-left:0px;}
</style>
<BODY>
<a href=”test.hmtl”>我是body下的a标签</a>
<div class=”div”>
<a href=”test.html”>我是.div下的a标签</a>
</div>
</BODY>
结果：.div a定义的样式生效，访问过test.html后，样式依然生效。
然后将样式表第一行改成：
a:link, a:visited {color:red; margin-left:10px; display:block}
结果：.div a定义的样式生效，访问过test.html后，IE6下样式失效，
定义了.div a:visited {color:blue; margin-left:0px;}，样式生效。
比较常见IE6下的:hover失效的问题，跟这个原理类似。
PS：个人认为这个算不上是IE6的BUG，不过既然“标准”的浏览器不是这样渲染的，也没什么办法啦，就当他是个BUG吧。