表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

您可能还关注的？

• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

说真的，这次的收获非常大，几位嘉宾演讲的主题和内容，都让我受益颇多

感谢为这次会议奔波劳累的工作人员，你们辛苦了

嘉宾分享的内容（转自崔凯的博客）：

• data on the web Klaus Birkenbihl（W3C | 翻译：安琪）
• 建立前端开发团队 蒋定宇（D-Link 台湾）
• 谈谈HTML5和CSS3 谢子斌（Opera 马来西亚）
• 网页性能优化之路 范俊豪（腾讯 深圳）
• 前端基础架构 张克军（豆瓣 北京）
• 从浏览器渲染看标准的重要性 梁璟彪（腾讯 深圳）

以上为几位嘉宾分享的PPT，一个小细节：克军的PPT经验是html+css+js做的……前端无敌！

具体的我还在吸收中……

希望以后能有更多的前端会议推动整个前端行业的发展

您可能还关注的？

• WebRebuild.ORG 北京第二届年会 宣传一下

确实很好，支持索引，可以方便的离线查询了
下载

http://code.google.com/p/mootoolstools/downloads/list

您可能还关注的？

• 一个在线JS代码调试器:jsfiddle
• 分享：建议“前端开发”人员掌握的技术
• 测试你的JavaScript能力？ 我还需要恶补！
• 关于top置顶的交互体验
• CSS阴影详解

核心代码

 <script>
  function js(){
	var jine=parseInt(document.getElementById("je").value);//每注金额
	var jiangjin=parseInt(document.getElementById("jj").value);//每注奖金
	var num=parseInt(document.getElementById("num").value);//计算期数
	var win=parseInt(document.getElementById("win").value);//保证利润数
	var content=document.getElementById("content");//输出容器
	var countmoney=0;//累计总投入
	var janci=jiangjin-jine;//每注利润值
	for(var i=1;i<=num;i++){
		//计算倍数
		var beishu=Math.ceil((countmoney+win)/janci);
		//累计投入金额
		countmoney=(countmoney+(beishu*jine));
		//本期奖金
		var nowjiangjin=(beishu*jiangjin);

		content.innerHTML=content.innerHTML+"第"+i+"期&nbsp需购买："+beishu+"注&nbsp;本期奖金："+nowjiangjin+"&nbsp;总投入:"+countmoney+"&nbsp;净利润:"+(nowjiangjin-countmoney)+"<br>";
	}
  }
  </script>

看具体效果的请去 Demo：http://www.iamued.com/demo/jisuan.html

还有一个C#软件版本的 直接放出下载地址吧 http://www.iamued.com/demo/jisuan.exe

就这么简单的一个算法 折腾了我半天 愁

随机日志

• 优秀产品经理的核心技能(转)
• 也谈谈做平台产品初期运营的困境
• 《从》之“产品设计是什么？”
• Javascript正则表达式基础
• kejun的HTML面试题答案揭晓

[原文发表时间] Thursday, June 10, 2010 10:34 PM

上个月，我写了一篇关于微软如何在向 jQuery贡献代码的文章，也谈到了在第一批贡献的代码中的一些功能：jQuery 模板和数据链接支持.

今天，我们发布了一个新的jQuery国际化插件的原型，你可以在你的JavaScript程序中引用这 个插件添加国际化功能。插件涵盖了超过350种文化的国际化信息，从苏格兰盖尔语、佛里斯兰语、匈牙利语、日语到加拿大英语等。插件将以开源的形式发布。

你可以从我们的Github代码库下载插件的原型版本：

http://github.com/nje/jquery-glob

另外也可以在这里下 载一些示例了解简单的用法。

理解国际化

jQuery国际化插件可以让你在 JavaScript代码中轻松地处理不同文化之间的数字、货币和日期格式。例如，你可以使用这个插件正确地显示一个国家的货币符号：

你也可以用这个插件编排日期格式，这样日期和月份 会以正确的顺序显示，而日期和月份的名称也能够得到正确的翻译：

请注意上图阿拉伯的日期格式中，年份显示成了 1431。这是因为年份已经按照回历的方式转换过了。

一些文化差异比较明显，例如使用不同的货币或者不同的月份名称等。但另外一些差异 却细微而又出人意料。例如，在有一些文化里，数字不是以均衡的方式分组的。在语言标记为“te-IN”的文化中（印度东部的泰卢固语），数字先按3位数字 分组，然后再每2位数字分组。因此象数字一百万（1000000）就会被写成“10,00,000”。而有些文化就根本不对数字进行分组。所有这些细微的 差异都能够被jQuery国际化插件自动处理。

要得到正确的日期可能非常需要技巧。不同的文化采用不同的历法，比如公历和回历。同一种 文化也可能会采用多个历法，比如日本就同时采用公历和以天皇年号推算的纪年历。插件提供了函数将日期在所有这些历法中相互转换。

使 用语言标记

jQuery国际化插件依据RFC 4646和RFC 5646标准里定义的语言标记来识别文化（参见 http://tools.ietf.org/html/rfc5646）， 语言标记通常由连字符将多个辅标签组合而成，比如：

请注意单一语言例如英语可以同时有多个语言标记。同是英语国家，加拿大采用的数字、货币和日期格式就不同于澳大利亚或者美国。你可以使用下面 的语言辅标签查找工具来获取某个文化的语言标记：

http://rishida.net/utils/subtags/

jQuery国际化插件里一个叫做globinfo的文件夹包含了这350种文化的信息。实际上，这个文件夹里有700多个文 件，因为它包括了每个文件的最小化（minify）和原始版本。

比如说，在globinfo文件夹，文件 jQuery.glob.en-AU.js对应英文（澳大利亚），jQuery.glob.id.js对应印度尼西亚文，而 jQuery.glob.zh-CHS对应简体中文。

示例：指定某种文化

假如你要创建 一个德文的网站，并且希望在客户端的JavaScript脚本里使用德语习惯显示所有的日期、货币符号和数字。那页面的源代码也许与下面的HTML类似：

注意上面的span标签，它们标识了所有需要用国 际化插件进行格式化的区域：商品的价格、上架的日期以及库存量。

要在网页里使用jQuery国际化插件，需要添加三个 JavaScript文件：jQuery库，jQuery国际化插件和指定的文化习惯信息：

在上例中，我将包含了德语文化习惯的 jQuery.glob.de-DE.js文件静态地加入到网页中，”de-DE”是语言标记，表示在德国使用的德语。

既然已经引入了 必要的脚本文件，就可以使用下面的客户端JavaScript代码调用插件来显示价格、上架的日期以及库存量等值：

jQuery国际化插件为jQuery函数库添加 了一些新的函数—包括preferCulture()和format()等新函数。你可以通过preferCulture()函数设置插件其他函数调用时 使用的默认文化。preferCulture()函数接受一个语言标记作为参数，这个函数会使用最接近这个语言标记的文化。

$.format() 函数才是真正用来编排货币、日期和数字格式的。$.format()函数的第二个参数是格式分类符。例如，传入“c”表示按货币的样式编排参数值。在 githum的ReadMe文件里详细描述了所有格式分类符代表的意思：http://github.com/nje/jquery-glob

当我们在浏览器打开这个页面的时候，所有的东西都是按照德语习惯正确显示。货币符号采用的是欧元符号，日期采用德语的日期和月份名称，并且，数 字分隔符用的是点号（.），而不是逗号（,）。

你可以通过运行示例下 载中的3_GermanSite.htm文件来了解上述方法。

示例：用户动态选择一个区域设置

在前面的例子中，我们显式指定使用德语文化习惯（通过引用jQuery.glob.de-DE.js文件）。我们现在来看看动态设置文化习惯的 几个例子。

比如说我们打算在页面上加一个包含所有350种文化的下拉框，当用户在下拉框里选择了一个文化，页面上所有的日期都按照这个 文化的习惯显示。

这是网页的HTML源代码：

请留意所有包含了日期的<span> 标签都有一个data-date属性（data-*属性是HTML 5里的新功能，同时在老的浏览器上也可以使用）。当用户在下拉框里选择了一个文化信息后，我们的代码将会格式化data-date属性里保存的日期。

为了显示所有可能的文化信息，我们要象下面这样添加一个叫jQuery.glob.all.js 的文件。

jQuery国际化插件里有一 个叫做jQuery.glob.all.js的文件，这个文件包含了所有插件支持的350多种文化的国际化信息。即使经过最 小化处理，还是有367k字节。由于文件很大，除非你的确需要一次性使用所有这些文化信息，我们建议你只添加所使用到的文化信息对应的 JavaScript文件。下一个例子中，我会演示如何在网页中动态地加载某个语言对应的JavaScript文件。

下一步，把所有支持的文化名称添加到下拉框的列表里。可以用$.cultures这个属性获取它们：

最后，再写几行代码把每个span标签里的 data-date属性的日期都抓出来并编排格式：

jQuery国际化插件里面的 parseDate()函数将一个字符串的日期转换成JavaScript日期，而format()函数则用来编排这些日期的格式。“D”这个格式分类符 说明使用长日期格式编排日期。

现在，只要页面浏览者选择这350种语言其中之一，内容都会被正确的国际化。你可以通过运行示例下 载中的4_SelectCulture.htm文件来了解上述方法。

示例：动态加载国际化文件

在上一节说过,你应该尽量避免在页面中引用jQuery.glob.all.js文件, 因为它实在是太大了。相反，你可以动态地加载你所需要的国际化信息。

比如说，你要创建一个下拉列表显示下面这些语言：

下面的代码会在用户从下拉框中选择一个新的语言后 执行。这段代码会先判断选中的语言对应的国际化脚本文件是否已经加载了。如果还没有加载，则使用jQuery的$.getScript()函数动态加载国 际化脚本文件。

当国际化脚本文件被浏览器加载以后，就会调用 globalizePage()函数，继而执行客户端的代码完成国际化。

这个方法的优点是可以让你避免加载整个 jQuery.glob.all.js文件—只要加载使用到的文件，而且只加载一次。

示例下 载中的5_Dynamic.htm文件演示了这个方法。

示例：自动检测用户的常用语言设置

大多数网站通过检测用户的浏览器设置来得到其常用语言，然后根据这种语言文化习惯来国际化网站内容。用户可以在浏览器中设置一个常用语言。这 样，用户在请求页面时，常用语言设置会包含在请求Http消息头的Accept-Language字段中。

如果使用的是微软的IE浏览 器，可以通过以下步骤设置你常用的语言：

1. 在菜单栏里选择工具，Internet 选项。

2. 选择常规标签。

3. 在外观里点击语言按钮。

4. 点击添加在语言列表里增加新的语言。

5. 然后把你最常用的语言放在列表的最顶端。

你可以在这个对话框中设置多门常用语言。所设 置语言的顺序关系将会体现在HTTP请求的Accept-Language字段中，如：

Accept-Language：fr- FR,id-ID;q=0.7,en-US;q=0.3

比较奇怪的是，用户不能够通过客户端的JavaScript脚本得到 Accept-Language的内容。微软的IE和Firefox浏览器都支持一系列语言相关的属性，这些属性可以通过 Window.navigator进行访问，例如windows.navigator.browserLanguage和 window.navigator.language，不过这些属性中的语言一般指的是操作系统中设置的语言或者是浏览器的语言版本。你不能通过这些属性 来得到用户设置的常用语言。

得到用户语言偏好（也就是Accept-Language字段中的内容）的唯一可靠方法就是编写服务器代 码。例如，下面的ASP.NET页面就利用了服务器的Request.UserLanguages属性把用户的语言偏好设置赋给了客户端 JavaScript的acceptLanguage变量（然后就可以通过客户端JavaScipt访问这些值了）：

为了使这段代码能够正常工作，页面中必须包含与 acceptLanguage对应的文化信息。例如如果你的常用语言是fr-FR（法语-法国），那就必须在这个页面中引用 jQuery.glob.fr-FR.js或者jQuery.glob.all.js这两个JavaScript脚本之一，否则没办法得到文化信息。关于 这个方法的应用可以示例下 载中的”6_AcceptLanguages.aspx”。

如果对于页面中用户的常用语言没有对应的脚本包含其文化信息，那 么$.preferCulture()方法就会引用中立（neutral）的文化信息（例如，使用jQuery.glob.fr.js，而不是 jQuery.glob.fr-FR.js）。如果中立文化信息也不可用，那么$.preferCulture()方法就会回滚到使用默认文化（英语）。

示例：利用国际化插件使JQuery UI DatePicker实现国际化

国际化插件的目的之一就是使开发能适应各种不同文化的jQuery小工具的变得更为简单。

我们希望确保jQuery的国际化 插件能够与现有的jQuery的UI插件如DatePicker共存并正常工作。为了实现这个目标，我们创建了DatePicker插件的一个整合版本， 使它可以在渲染日历的时候利用我们的插件来提供国际化支持。下图演示了把jQuery的国际化插件和整合后的DatePicker插件一起加入到页面并选 择印度尼西亚语的效果。

注意：一周中每一天的名称都以印度尼西亚语的缩写 形式显示。 此外，月份的名字也以印度尼西亚语显示。

你可以从我们的github网站下载整合版的JQuery UI DatePicker。你也可以使用示例下 载中文件7_DatePicker.htm所使用的版本。

• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快
• YUI3设计中的激进和妥协

您可能还关注的？

• WEB标准化交流会第七期-人人都是”架构”师
• 2010年3月 – WEB标准化交流会 -腾飞吧前端们
• 第六期WEB标准化交流会 会后总结 By 刘钢
• 第四期 WEB标准化交流会 参会总结

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

其实更多的时候需要前端人员、后端人员去提高安全意识

随机日志

• [译]jQuery 1.4 发布：15个新特性实例精讲
• 前端优化：在服务端合并和压缩 JavaScript和CSS文件
• 弹出窗口[浮层]与切换页面的对比总结
• 即拷即用：onDOMReady（提取自jQuery.ready）
• Data URI 和 MHTML

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
#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=…，不仅解决前面问题且更短。

配置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最大值问题，后会有解释

1. 使用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

在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的《前端性能优化和自动化》中 也介绍了它。

• 如何量身打造一个前端框架
• 懂得交互的视觉设计师更具有竞争力
• 14条最佳JS代码编写技巧
• 最近写日期操作的几个JS函数
• 《从》之“产品设计是什么？”

日程安排

• 举办时间： 2010年07月17日(星期六)
• 举办地点： 北京航空航天大学新主楼会议中心 （地图）
• 报名地址： 距离报名还有1天5时13分39秒。
• 报名截止： 2010年06月17日 0点0分0秒

您可能还关注的？

• Webrebuild 2010分享