YUI Combo Handler

2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块，它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件，从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件，常用方式如下：

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/
container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

而使用Combo Handler服务之后，则上述的代码可以写为：

<script src="http://yui.yahooapis.com/combo?
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&
2.8.0r4/build/container/container_core-min.js&
2.8.0r4/build/menu/menu-min.js&
2.8.0r4/build/element/element-min.js&
2.8.0r4/build/button/button-min.js&
2.8.0r4/build/editor/editor-min.js"></script>

除了代码的可读性稍稍有一点点降低外，使用Combo Handler服务大大的降低了HTTP请求数，同时也减少了URL代码量，这对于Web性能优化来讲至关重要。所以，随后YUI从2.6.0开始，其核心组件YUI Loader内置了Combo Handling功能，即使用YUI Loader时，通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来，这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时，CDN默认是使用Yahoo! CDN（http://yui.yahooapis.com），所以没有任何问题。这正是YUI最迷人的地方之一。

遗憾的是http://yui.yahooapis.com在中国的速度并不佳，本来中国雅虎提供了http://cn.yui.yahooapis.com/ ，但尚未提供Combo Handler服务，同时因种种原因，其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源，但至少现在依旧是私有技术，要使用就需要自己实现类似功能，所以国内类似技术的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify，它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似Combo Handler，只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify，那么上面Rich Text Editor的代码用Minify的默认格式来写就是：

<script src="http://yui.yahooapis.com/min/f=
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,
2.8.0r4/build/container/container_core-min.js,
2.8.0r4/build/menu/menu-min.js,
2.8.0r4/build/element/element-min.js,
2.8.0r4/build/button/button-min.js,
2.8.0r4/build/editor/editor-min.js"></script>

本地使用Minify很简单，只需要Apache + PHP环境就OK了：

1. 安装好Apache + PHP (Windows、Mac)。
2. 下载Minify源码，解压，然后把min文件夹复制到指定的根目录下，比如localhost。这时URL的写法大概是http://localhost/min/f=...
3. 启用Apache的Mod Rewrite模块，然后在min文件夹下新建.htaccess文件，并添加如下Rewrite规则：

   <IfModule mod_rewrite.c>
   RewriteEngine on
   
   # You may need RewriteBase on some servers
   # 如果做了所有的开启Mod Rewrite的设置依旧无效，请城市尝试启用下面这句
   #RewriteBase /min
   
   # rewrite URLs like "/min/f=..." to "/min/?f=..."
   RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
   </IfModule>

   如果不启用Mod Rewrite功能，则Minify的URL会类似http://localhost/min/index.php?f=…，这对客户端和中间服务器的缓存不利，而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…，不仅解决前面问题且更短。

4. 配置Minify，即编辑min/config.php文件

   $min_enableBuilder = true;
   //本地使用时可以通过http://dwn/min/builder/来进行配置，外部使用时请设置为false
   
   //$min_cachePath = 'c:\\WINDOWS\\Temp';
   //$min_cachePath = '/tmp';
   //$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
   //选择其一，去掉注释设置临时缓存目录，这样可以减少程序运算提高性能
   
   $min_serveOptions['maxAge'] = 1800;
   //设置浏览器缓存的时间，为了提升性能建议这个时间设置尽可能的长，比如315360000
   //如果需要在不改变URL的情况下更新静态文件，可以采用类似时间戳的方式，
   //如http://localhost/min/f=example/example.css&20100601.css
   //建议静态文件采用版本号管理，每次修改都需要升级版本号，这样就无需时间戳了，
   //如http://localhost/min/f=example/example_1_0_1.css
   
   $min_serveOptions['minApp']['maxFiles'] = 10;
   //参数f获取参数的个数，即合并的文件个数，这个数量完全可以增大，比如50，
   //当然可能会遇到URL最大值问题，后会有解释
   
   $min_documentRoot = '';
   //$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
   //$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
   //当$min_documentRoot为空时，其值就是$_SERVER['DOCUMENT_ROOT']，
   //但合并的文件不在$_SERVER['DOCUMENT_ROOT']下，会导致400错误，
   //这个时候可以启用第2行或第3行
   
   

5. 使用Minify

   比如，有两个JavaScript文件，http://localhost/example/a.js,http://localhost/example/b.js，那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js，直接把这个URL放到页面中就可以使用了。

实际上Minify不仅仅实现了合并功能，同时默认在合并的同时还会对文件进行精简压缩，如果你在本地本身就对文件进行压缩了，比如使用YUI Compressor，那么可以在config.php中进行如下设置取消Minify的压缩以提升性能：

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';

如果服务端支持Java，那么也可以对Minify进行简单配置而实现利用YUI Compressor压缩JavaScript和CSS文件。

直接在服务端进行合并和压缩，这非常的灵活，也极大的减轻了前端开发成果的部署过程，真使事半功倍。更多配置请看Minify CookBook和Wiki

小提示：Minify使用的New BSD License，这就意味着使用者可以几乎自由的使用该代码。BSD协议鼓励代码共享，但需要尊重代码作者的著作权。BSD由于允许使用者修改和重新发布代码，也允许使用或在BSD代码上开发商业软件发布和销售，因此是对商业集成很友好的协议。而很多的公司企业在选用开源产品的时候都首选BSD协议，因为可以完全控制这些第三方的代码，在必要的时候可以修改或者二次开发。更多中文信息请看《BSD协议》。

在YUI3中使用Minify

在YUI2中，合并机制只支持库本身的文件，自定义的文件会单独一一加载。从YUI3开始，模块变得更小，这样就导致使用合并时URL会变长，但在IE下URL的最大值是2083，Apache默认的URL最大值是8192，所以当URL在对应浏览器下超出最大值时，YUI3会自动根据浏览器判断进行拆分成多个合并的URL，并且还提供了maxURLLength来设置最大值。而从YUI3.1.0开始，不仅仅支持自定义文件的合并，还支持可以使用多个提供合并服务的CDN，即可以对YUI组件使用http://yui.yahooapis.com这个CDN，其余文件使用其他支持合并的CDN，这样非常的实用、方便和灵活。示例在YUI3中使用Minify就说明了这点。

由于YUI默认URL的合并形式和Minify的不相同，所以在YUI实例化时需要利用正则替换来实现YUI3支持Minify的URL合并形式，但这种方式既不灵活，且有风险，不友好又效率低。比较简单的方式是直接修改YUI 3的源码，如示例在修改后的YUI3中使用Minify。同时，YUI 3.1.*的版本有一个bug，即同时合并JavaScript和CSS时，较短的那个URL结尾处多一个&符号，如示例在YUI3中使用Minify中：

http://yui.yahooapis.com/combo?3.1.1/build/widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&

http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css&

这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。

在CDN上使用Minify

CDN的全称是Content Delivery Network，即内容分发网络。其最常应用就是通过位于不同地理位置的服务器把静态资源部署到用户最近的边缘，这样能有效解决Web服务中大量静态资源的速度和性能问题。由于实施成本比较高，所以在实际的应用中，大型公司一般会组建自己的CDN，而小型公司只能租借第三方的CDN，但不管怎样这两种方式都不会影响在服务端实施合并和压缩程序。一般情况下，静态资源也并不是直接上传到CDN，而是先传到一台后台服务器，然后各地CDN的前端Cache服务器按需索取。YUI CDN的Combo Handler就是部署在其后台服务器上的，Minify也应如此。简单图示如下：

当一个资源请求到CDN时，CDN会先检查本地是否存在这个资源，如果有则会直接返回该资源，如果没有则会请求其后台服务器，后台服务器会依据资源URL的信息进行相应的处理，然后返回给CDN，CDN就会存储这个资源，再次出现这个资源请求时就无需请求后台服务器了。所以，虽然合并特别是压缩JavaScript和CSS文件是消耗时间的，但是由于只需要第一次，并且第一次基本上由我们自己访问掉（我们可以创建程序自动进行一次访问来保证，实际上图片优化也可以采用这种方式），所以基本上很安全。这正是目前在口碑网实施的JavaScript和CSS合并方案，在第4届D2的《前端性能优化和自动化》中也介绍了它。

YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

YUI Doc和JavaDoc、JSDoc和JsDoc Toolkit相似。YUI Doc是由注解驱动（comment-driven ）的系统，它通过解析代码中描述结构的注解来生成文档。由于它纯粹的依赖于注解，所以并不像一些模拟系统一样需要有惯用语和代码模式。更详细的介绍可以看YUI Doc的官方文档和YUI blog上的《YUI Doc: A New Tool for Generating JavaScript API Documentation》（由于YUI blog咱们无法访问，比较好的解决方案就是在Google Reader中订阅它的Feed，直接输入 http://yuiblog.com即可。）

YUI Doc是基于Python开发，且依赖几个扩展库，加之其Getting Started写的也比较含糊，所以如何使用这个工具反而成为第一道门槛，尤其对于那些对Python不熟悉的同学来说。所以，下面的重点是介绍如何在Windows上使用YUI Doc：

1. 下载Python2.5.2安装之。
   虽然Python3.0和Python2.6都已经出来很久了，但之所以依旧选择Python2.5.2，是因为后面要用到的安装Python扩展库的工具setuptools在Windows下的最新版本对应的是Python2.5。我不知道它是否支持2.5以上，有兴趣的可以试试。
2. 下载setuptools-0.6c9.win32-py2.5.exe并安装之，setuptools会自动安装到Python所在安装目录的Scripts目录下。
   setuptools为Python提供了简单的包管理和发行功能。后面的扩展库的安装就是利用它的easy_install，非常方便。有兴趣的可以看看《可爱的 Python: 使用 setuptools 孵化 Python egg》。
3. 为了使用方便需要配置一下“环境变量”，即在“我的电脑 》右键 》属性 》高级 》环境变量 》系统变量 》 选中Path 》 编辑”，在弹出框中加入：

   ;D:\Program Files\python;D:\Program Files\python\Scripts

   然后应用即可。前面的两个路径分别是我的Python和setuptools的安装路径，你需要修改成你自己的。

4. 开始 》运行 》(Win + R)输入“cmd”，输入：

   python -c "import pkg_resources"

   没有任何输出，即表示setuptools安装成功。接着依次输入运行：

   easy_install Pygments
   easy_install simplejson
   easy_install Cheetah
   

   setuptools会自动寻找并下载Pygments、SimpleJSON和Cheetah这三个扩展库，并安装它。

5. 下载最新版本YUI Doc，并解压在某个目录下。复制其bin目录下的example.bat文件，重命名为test.bat，然后用记事本或其他编辑器打开并配置它:

   SET yuidoc_home="D:\yui\yuidoc"
   REM YUI Doc的路径
   SET parser_in="D:\yui\src"
   REM 要生成文档的JS文件路径，比如为了测试就我临时建一个，里面就放着YUI 的 dom.js
   SET parser_out="D:\yui\src\parser"
   REM YUI Doc会把解析的JS文件提取出来所要存放的位置
   SET generator_out="D:\yui\src\generator"
   REM 生成文档存放的位置
   

   保存并运行test.bat后，就会发现D:\yui\src中多了parser和generator两个目录，而generator中正是你要的文档。

支持中文注释的解决方案

1. 下载最新版本YUI Doc，解决方案在yuidoc-27中验证通过
2. 把所有.js文件都转成不带BOM的UTF-8编码
3. 修改文件/bin/yuidoc_highlight.py：

   from pygments.formatters import HtmlFormatter
   #新增下行
   import codecs
   ...
   #f=open(os.path.join(path, file))
   #fileStr=StringIO(f.read()).getvalue()
   #f.close()
   fileStr = codecs.open( os.path.join(path, file), "r", "utf-8" ).read()
   log.info("highlighting " + file)
   
   #highlighted = highlightString(fileStr)
   highlighted = highlightString(unicode(fileStr))
   

4. 在Python的\Lib\site-packages\下增加一个名为sitecustomize.py的文件，其内容为：

   import sys
   sys.setdefaultencoding('utf-8')
   

谢谢小马提供中文注释的解决方案

学会使用工具仅仅是开始了一小步，仔细看看YUI Doc的官方文档吧，利用其来促使我们写出更高效优雅的前端代码并惠及更多的人才是一大步。

1. 周爱民的讲演“前端设计与开发的基本模式”，看起来很丰富，很多模式或理念听起来也蛮有争议，避免不了空和虚，但我不能不承认他提供了很多我有兴趣但尚未涉及东西，这些给了我新的视角。
2. 黄继佳的讲演“Silverlight应用”，虽然很高兴他能来参加和支持D2，幻灯片也很cool，但我强烈的感觉这是一个很纯正的Silverlight的产品推广，我不是太喜欢。
3. Hedger Wang的讲演“Enterprise Ajax in PHP”，是这次D2的精华。他提出管理Ajax在企业级应用的设计模式，很多正是我日常开发中遇到，比如他讲到的映射，我也曾经做过类似的解决方案，比如他讲到的对多次同一请求的管理，我也曾思考过，但那往往是一个个独立的小点，这次讲演终于让我有了从点到线到面的感觉。他的讲演也准备的相当好，既有总结，又有代码，同时利用生活中的例子来说明原理，想听不明白都不行。我不需要如何得称赞hedger的讲演，如果你的开发涉及到Ajax，那么你就应该去看看他的讲演。ps，祝他杭州玩的开心。
4. Nate Koechly的讲演“Enhanceing Web Sites With The YUI Library”(English)”，作为YUI开发的核心成员，这次讲演虽然有点推广YUI的意味（在此有近一年应用YUI经验的我也强烈推荐YUI），但是仅仅从他幻灯片上就可以看出他事先的准备和用心，甚至他表达出了要学习汉语的意愿。但很遗憾的是，由于语言的原因，这次没有能充分的从Nate身上获取更多的更深的东西，虽然有hedger义务做翻译，虽然对nate的提问是最多的。
5. 章亦春的讲演“Nifty web apps on an OpenResty”，讲的很有激情，也给出了一个新的Web OS，作为一个视角是一个很棒的东西，但是作为我个人来讲我并不赞同这个思路，我一直认为让一门语言处于它最适当的位置才是王道，就像语义化设计一样，应该用合适的标签来组织合适的数据。虽然章亦春提到了不应该对Javascript滥用，但是很遗憾的是我感觉这就是一种滥用。
6. 案例分享阶段，贤安的“如何写一个富文本编辑器”，小马的“前端开发工具介绍”，一位仁兄（不好意思，记不起来名字）的“用Adobe Air开发IM”，都很有意思，这些很务实的小分享越多越好，因为每个人的心得体会小窍门汇聚在一起就有了越来越顺畅的前端开发。

第二届D2已经结束，第三届目前还没有明确的主办方（有兴趣请看如何申办D2），我的一些想法和建议如下：

1. 主办D2是需要费用的，所以建议下一次D2可以有正式的赞助商和门票，这将能保证D2更好的运作。
2. 不少人对我说互动不够，但是由于演讲本身就是一对多的，所以注定了互动是有限度的。建议通过在午餐和晚餐时话题分桌，一边吃，一边彼此认识，一边圆桌会议。
3. 这次D2已经很务实了，下一次希望更务实。可以提前征集大家期望的讲演内容，可以参考大家主题邀请演讲嘉宾。同样也可以提前搜集分享案例，更好的更深入的组织分享。我期望下一次D2能遇到的内容：
   1. 语义化的HTML。这是一个最基础的东西，也将是一个巨大的挑战。
   2. Firebug实战。虽然大家开发基本上离不开它，但是我总感觉并没有充分的利用它，每一个小技巧都可以让我们进步。
   3. 整站的CSS管理。这肯定是一个百花齐放的问题。
   4. 高性能的WEB页面。Yahoo的preformance列了34条，但是我们的实战呢？
   5. 前端工程师如何推动整个项目的设计和开发流程？这就是需要实践+经验+效果。

中国雅虎主办第二届D2前端开发论坛

坐着听讲演的开发者。由于2008的原因，北京的会议室不是特别好找，这次的会议室过于细长，hedger首先坐在了地上，并且号召大家都这么做，很多年没有坐在地上了，感觉不错。

Nate正在开讲，首先拿出相机拍一下听讲者。他的幻灯片开始部分用了中文，是他临时学的，拿到他名片的朋友也会发现，有一面是简体中文的。

Nate讲演时发现的一个提示站点是否使用YUI的小工具。在他的演讲过程中，列出了当前哪些站点使用了YUI，估计都是用这个小工具挖掘的。

hedger演讲中…

部分现场的工作人员，我的同事们

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
bdo[dir] {
  unicode-bidi: bidi-override;
}

/* blocks */

html, div, map, dt, isindex, form {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

dd {
  display: block;
  -moz-margin-start: 40px;
}

blockquote {
  display: block;
  margin: 1em 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  /*** start:Firefox2 ***/
  padding-left: 1em;
  border-left: solid;
  /*** end:Firefox2 ***/
  /*** start:Firefox3 ***/
  -moz-padding-start: 1em;
  -moz-border-start: solid;
  /*** end:Firefox3 ***/
  border-color: blue;
  border-width: thin;
}

span[_moz_quote=true] {
  color: blue;
}

pre[_moz_quote=true] {
  color: blue;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin: 1em 0;
}

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  -moz-box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}

table[rules]:not([rules="none"]) {
  border-collapse: collapse;
}

/* caption inherits from table not table-outer */
caption {
  display: table-caption;
  text-align: center;
  -moz-box-sizing: border-box;
}

table[align="center"] >gt; caption {
  margin-left: auto;
  margin-right: auto;
}

table[align="center"] >gt; caption[align="left"] {
  margin-right: 0;
}

table[align="center"] >gt; caption[align="right"] {
  margin-left: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table >gt; tr {
  vertical-align: middle;
}

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit;
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
}

tr >gt; form:-moz-is-html, tbody >gt; form:-moz-is-html,
thead >gt; form:-moz-is-html, tfoot >gt; form:-moz-is-html,
table >gt; form:-moz-is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

/* inlines */

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b, strong {
  font-weight: bolder;
}

i, cite, em, var, dfn {
  font-style: italic;
}

tt, code, kbd, samp {
  font-family: -moz-fixed;
}

u, ins {
  text-decoration: underline;
}

s, strike, del {
  text-decoration: line-through;
}

blink {
  text-decoration: blink;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

nobr {
  white-space: nowrap;
}

/* titles */
abbr[title], acronym[title] {
  border-bottom: dotted 1px;
}

/* lists */

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
  /** start:Firefox2 **/
  -moz-float-edge: margin-box;
  /** end:Firefox2 **/
}

/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
ol ul,   ul ul,   menu ul,   dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir,  ul dir,  menu dir,  dir dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

/* leafs */

/* gt; noshade and color attributes are handled completely by
 * the nsHTMLHRElement attribute mapping code
 */
hr {
  display: block;
  height: 2px;
  /** start:Firefox2 **/
  border: 1px -moz-bg-inset;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  border: 1px inset;
  /** end:Firefox3 **/
  margin: 0.5em auto 0.5em auto;
  /** start:Firefox3 **/
  color: gray;
  /** end:Firefox3 **/
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}

hr[size="1"] {
  /** start:Firefox2 **/
  border-style: -moz-bg-solid none none none;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  border-style: solid none none none;
  /** end:Firefox3 **/
}

*|*:-moz-any-link img, img[usemap], object[usemap] {
  border: 2px solid;
}

/** start:Firefox3 **/
img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
  content: -moz-alt-content !important;
  unicode-bidi: embed;
}

object:-moz-broken >gt; *|*, applet:-moz-broken >gt; *|*
object:-moz-user-disabled >gt; *|*, applet:-moz-user-disabled >gt; *|* {
  /*
    Inherit in the object's alignment so that if we aren't aligned explicitly
    we'll end up in the right place vertically.  See bug 36997.  Note that this
    is not !important because we _might_ be aligned explicitly.
  */
  vertical-align: inherit;
}

img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
  /*
    Set visibility too in case the page changes display.  Note that we _may_
    want to just set visibility and not display, in general, if we find that
    display:none breaks too many layouts.  And if we decide we really do want
    people to be able to right-click blocked images, etc, we need to set
    neither one, and hack the painting code.... : (
   */
  display: none !important;
  visibility: hidden !important;
}
/** end:Firefox3 **/  

img[usemap], object[usemap] {
  color: blue;
}

frameset {
  display: block ! important;
  overflow: -moz-hidden-unscrollable;
  position: static ! important;
  float: none ! important;
  border: none ! important;
}

frame {
  border: none ! important;
}

iframe {
  border: 2px inset;
}

noframes {
  display: none;
}

spacer {
  position: static ! important;
  float: none ! important;
}

canvas {
  -moz-user-select: none;
}

/* focusable content: anything w/ tabindex >gt;=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
  /** start:Firefox2 **/
   outline: 1px dotted invert;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
  /** end:Firefox3 **/
}

/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
   display: none;
}

/* emulation of non-standard HTML gt; tag */
marquee {
  /** start:Firefox2 **/
  display: block;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  width: -moz-available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;
  /** end:Firefox3 **/
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}

marquee[direction="up"], marquee[direction="down"] {
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
  height: 200px;
}

/* PRINT ONLY rules follow */
@media print {

  marquee { -moz-binding: none; }

  /* XXX this should not be necessary, we should be stopping blinking
     of any kind in print preview, not just the gt; element */
  blink {
    text-decoration: none;
  }

}

虽然CSS2.1的附录里给了HTML4默认样式的建议(Appendix D. Default style sheet for HTML 4)，这本身就不是一个很完美的解决方案，加上各个浏览器附加上一点自己私有的属性，Firefox默认样式表中清楚的说明了这点，导致了各个浏览器的默认样式表不尽相同，比如对比这份参考CSS2.1的对HTML4默认样式的建议通过实践总结出来的IE6的默认样式表(INTERNET EXPLORER 6 DEFAULT STYLE SHEET)。解决这个问题的常见方法就是通过一个通用的CSS文件来重置HTML标签的样式，使其在各个浏览器中表现的一样，比如YUI Reset CSS和Eric Meyer的CSS Tools: Reset CSS就是很好的解决方案。

扩展阅读：Really Undoing html.css – Eric Meyer

在YUI 2.4.0到2.5.1版本中，YUI Loader通过其addModule()方法只能配置一个YUI Loader实例的加载模块信息，无法配置全局的加载模块信息。实际中，能够全局的配置加载文件的模块信息对于统一维护非常的重要，特别是在静态文件服务器设置了上传文件不可以修改和删除情况下。下面是解决这个问题的两个方法：

方法1：修改YUI Loader源文件，引入YAHOO_config.load来配置全局信息

在YUI两个全局变量之一的 YAHOO_config中,有一个load属性是用来配置YUI Loader的全局信息的，但是遗憾的是仅仅是2.4.0之前的版本支持。

1、修改YUI Loader源文件

var Y=YAHOO, util=Y.util, lang=Y.lang, env=Y.env;
/*
 *在上面一行代码的位置下面加上下面的代码：
 *判断当YAHOO_config存在且有load属性时，把YAHOO_config.load赋值给变量Y_load
 */
if('undefined'!== typeof YAHOO_config){
	if(lang.hasOwnProperty(YAHOO_config,'load')){
		var Y_load = YAHOO_config.load;
	}
}
...
this.base = YUI.info.base;
/*把上面一行修改为下面一行，这样可以用过YAHOO_config.load.base来指定YUI组件的路径*/
this.base  = (lang.hasOwnProperty(Y_load,'base'))?Y_load.base:YUI.info.base;
...
this.moduleInfo = lang.merge(YUI.info.moduleInfo);
/*把上面一行修改为下面一行，这样可以用过YAHOO_config.load.moduleInfo来指定YUI组件的路径*/
this.moduleInfo = (lang.hasOwnProperty(Y_load,'moduleInfo'))?
lang.merge(YUI.info.moduleInfo,Y_load.moduleInfo):lang.merge(YUI.info.moduleInfo);

2、在YUI Loader文件前写下如下配置文件：

YAHOO_config = {
load : {
 base : 'http://cn.yui.yahooapis.com/2.5.1/build/',
 /*
 *  通用的非YUI组件和不自动加载皮肤的YUI组件
 *  @name   string
 *  @type   string
 *  @fullpath   string
 *  @requires   array
 *  @optinal    array
 *  @skinnable  boolean
 */
 moduleInfo : {
/*
 *YUI的组件中，有皮肤的组件使用时都会自动加载皮肤
 *比如require(['container'])时，会加载container.js，也会加载container.css
 *但是实际应用中，往往不会直接使用YUI的默认皮肤
 *利用YUI Loader本身的skins属性设置，只能在具体的YUI实例中使用，且需要满足YUI的文件结构
 *利用insert({},'js')方法虽然只能加载Js，但如何require()方法中的CSS也会被过滤掉
 *所以最好的方法是全局性的把其skinnable属性值修改为false
 */
  'container': {
   'type': 'js',
   'path': 'container/container-min.js',
   'requires': ['dom', 'event'],
   'optional': ['dragdrop', 'animation', 'connection'],
   'supersedes': ['containercore'],
   'skinnable': false
  },
  'dwncontainercss' : {
   'type' : 'css',
   'fullpath' : '/lab/2008/extend-yuiloader/container.css'
  },
  'dwncarouselcss':{
   'name' : 'dwncarouselcss',
   'type' : 'css',
   'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'
  },
  'dwncarousel':{
   'type' : 'js',
   'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',
   'requires':['dwncarouselcss','yahoo','event','dom',
                'containercore','animation']
  }
 }
}
}

请看演示实例1

方法2：利用YAHOO.lang.extend方法封装一个新的Loader

YAHOO.namespace('CN.util');
/* start:YAHOO.CN.util.YUILoader */
YAHOO.CN.util.YUILoader = function(o){
 YAHOO.CN.util.YUILoader.superclass.constructor.call(this,o);
  this.base = 'http://cn.yui.yahooapis.com/2.5.1/build/';
  this.addModule({
   'name': 'container',
   'type': 'js',
   'path': 'container/container-min.js',
   'requires': ['dom', 'event'],
   'optional': ['dragdrop', 'animation', 'connection'],
   'supersedes': ['containercore'],
   'skinnable': false
  });
  this.addModule({
   'name' : 'dwncontainercss',
   'type' : 'css',
   'fullpath' : '/lab/2008/extend-yuiloader/container.css'
  });
  this.addModule({
   'name' : 'dwncarouselcss',
   'type' : 'css',
   'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'
  });
  this.addModule({
   'name' : 'dwncarousel',
   'type' : 'js',
   'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',
   'requires':['dwncarouselcss','yahoo','event','dom',
                'containercore','animation']
  });
}
YAHOO.lang.extend(YAHOO.CN.util.YUILoader,YAHOO.util.YUILoader);
/* end: YAHOO.CN.util.YUILoader */

YAHOO.CN.util.YUILoader的使用和YAHOO.util.YUILoader的使用没有任何区别。请看演示实例2

两种方法的优劣比较

方法1的缺点是需要修改YUI Loader的源文件，而方法二2只是外层增加一个壳，比较友好和保险，但方法1直接修改配置文件的方法比方法2每次实例化都需要通过特定方法修改配置文件要高效，特别是当添加或者修改的配置模块间也有依赖关系的时候，方法2很可能会因为过度运算而死掉。例如把实例中的模块container依赖于dwncontainercss的时候，方法1没有问题（请看演示实例3），但方法2下浏览器会提示脚本忙（请看演示实例4）。

Douglas Crockford已经传授了一个有用的单例模式（singleton pattern）实现此规则，我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式（module pattern）。它是如下工作的：

1. 创建一个命名空间对象：如果你使用YUI，可以用YAHOO.namespace()方法： YAHOO.namespace("myProject");这分配了一个空的myProject对象，是YAHOO的一个成员（如 果myProject已存在的话，则不会被覆盖）。现在我们可以开始添加YAHOO.myProject的成员。
2. 对你的命名空间对象分配一个匿名函数返回值：

   YAHOO.myProject.myModule = function () {
   return  {
     myPublicProperty: "我作为YAHOO.myProject.myModule.myPublicProperty被访问。";
     myPublicMethod: function () {
       YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod被访问。");
     }
   };
   }(); // 这个括号导致匿名函数被执行且返回
   

   注意有闭合大括号和紧接着的括号()的最后一行—这种符号导致了匿名函数的立即执行，返回包含myPublicProperty和myPublicMethod的对象。只要这个匿名函数一返回，返回对象就作为YAHOO.myProject.myModule被访问。

3. 在匿名函数中，在返回语句前加入“私有”方法和变量。到目前为止，我们只是将myPublicProperty和myPublicMethod直接分配到YAHOO.myProject.myModule中。此外，当我们在返回语句之前放置一些代码时，这个模式还支持被增加的效用。

   YAHOO.myProject.myModule = function () {
   //“私有”变量：
   var myPrivateVar = "我仅能在YAHOO.myProject.myModule内被访问。";
   //私有方法：
   var myPrivateMethod = function () {
       YAHOO.log("我仅能在YAHOO.myProject.myModule内被访问。");
   }
   
   return  {
       myPublicProperty: "我作为YAHOO.myProject.myModule.myPublicProperty能被访问。"
       myPublicMethod: function () {
       YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod能被访问。");
       //在myProject,我能访问私有的变量和方法
       YAHOO.log(myPrivateVar);
       YAHOO.log(myPrivateMethod());
       //myPublicMethod的原生作用域是myProject，我们可以用“this”来访问公共成员。
       YAHOO.log(this.myPublicProperty);
       }
   };
   }();

   在上面的代码中，我们从一个匿名函数返回有两个成员的一个对象。在YAHOO.myProject.myModule内部，可以分别用this.myPublicProperty和this.myPublicMethod来访问。在YAHOO.myProject.myModule外部，公共成员可以用YAHOO.myProject.myModule.myPublicProperty和YAHOO.myProject.myModule.myPublicMethod来访问。
   私有变量myPrivateProperty和myPrivateMethod只能被匿名函数本身或返回对象的成员访问。尽管匿名函数会立即执行和终止，但它们依然是保留着，凭借闭包（closure）的力量——通过一个函数的局部变量在这个函数返回后是保留的规则。只要 YAHOO.myProject.myModule需要它们，我们的两个私有变量就不会被销毁。

4. 实践这个模式。让我们来看看这个模式的一个常见应用案例。假设你有一个列表，列表上的一些项可以被拖拽。应用拖拽的项上有拖拽的CSS类。

   <!--这个脚本文件包含所有的YUI实用程序-->
     <script type="text/javascript"
   src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
   <ul id="myList">
      <li class="draggable">一项</li>
      <li>二项</li> <!--二项将不能被拖拽-->
      <li class="draggable">三项</li>
      </ul>
   <script>
     YAHOO.namespace("myProject");
     YAHOO.myProject.myModule = function () {
    //YUI实用程序的私有简写引用：
     var yue = YAHOO.util.Event,
     yud = YAHOO.util.Dom;
    //私有方法
     var getListItems = function () {
    // 注意这个地方使用其他的私有变量，包括"yud"YAHOO.util.Dom的简写：
     var elList = yud.get("myList");
     var aListItems = yud.getElementsByClassName(
     "draggable", //得到仅有CSS类"draggable"的项
     "li", //仅返回列表项
     elList //限定搜索改元素的子
     );
     return aListItems;
     };
    //这个放回的对象将变成YAHOO.myProject.myModule:
     return  {
    aDragObjects: [], //可对外访问的，存储DD对象
    init: function () {
     //直到DOM完全加载好，才实现列表项可拖拽：
     yue.onDOMReady(this.makeLIsDraggable, this, true);
     },
    makeLIsDraggable: function () {
     var aListItems = getListItems(); //我们可以拖拽的那些元素
     for (var i=0, j=aListItems.length; i<j; i++) {
     this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
     }
     }
    };
     }();
   //上面的代码已经执行，所以我们能立即访问init方法：
     YAHOO.myProject.myModule.init();
     </script>

   这是一个简单的例子，特意写的详细一些——如果按照这种方式做，我们无疑能把它写的更紧凑。当项目变得更加复杂和它的API增加，这个模式缩放的很好。通过这种方式，它避免了全局命名空间，提供了对外的可以访问的API方法，支持受保护或“私有”的数据和方法。

• [1]原文：《a javascript module pattern》。这是在YUI blog上的，有的地方可能打不开，可以搜一下英文的转载或者利用搜索引擎的缓存也能看。
• [2]《A JavaScript Module Pattern – JavaScript的一种模组模式》这是别人的翻译，参考了不少，不过感觉挺不方便看的，这是我翻译的这篇文章的一个原因，当然最主要的原因是这篇文章算是学习YUI的最基础的文章了，整个YUI的模块模式都基于此。