Yahoo!用户界面博客（YUIBlog）

移动浏览器缓存限制：机器人，IOS，和webOS

更新（2010年7月12日）：虽然在这篇文章中所描述的结果是准确的HTML页面，新的测试显示非常不同的CSS和JS资源的缓存限制。 描述了在移动浏览器缓存限制，再更新的结果。

韦恩Shea和Tenni陶依尔在2008年年初，写上一个YUI博客文章的iPhone可缓存中，他们到的各种特性和限制在iPhone OS 1.x的移动Safari浏览器的缓存共享研究成果 除其他事项外，他们发现，超过25KB更大的各个组成部分是不缓存，有475KB和500KB之间最大的总缓存大小。

自那时以来发生了很大变化。 我们已经看到了两个新的主要版本和次要版本的iPhone操作系统（IOS），和其他几个与精干浏览器的移动设备很多都出现挑战iPhone的。 斯托扬STEFANOV发现，在2009年年底， iPhone的缓存限制，改变了 （可悲的是，坏）。 但是，在做的事情站在现在？ 而那些非的iOS浏览器？

背景

浏览器有两种类型的缓存，我们正在关注这些测试的目的：

• 组件缓存 ，对象缓存，存储个人文件。 所有的HTML，CSS，JavaScript的，和图像进入组件缓存。 每当它需要这些组件之一，浏览器首先检查网络请求之前缓存。
• 又称后退/前进缓存， 页面缓存 ，存储整个页面及其所有组件，以及它们当前的状态。 当您使用的向前或向后“按钮，浏览器将加载页面，如果可能的话从页面缓存。

HTML5的应用程序缓存是另一种类型的缓存，这是通过移动浏览器的广泛支持。 浏览器厂商已经做了记录的应用程序缓存的限制，良好的工作，所以我不包括在我的测试。 稍后更多的应用程序缓存。

设备进行测试

我测试以下的手机浏览器/平台组合：

• 的Andr​​oid 2.1（Nexus One的）
• 移动Safari浏览器（第一代的iPhone）的iOS 3.1.3
• 在iOS 3.2移动Safari（IPAD）
• 在iOS 4.0（iPhone 3GS的移动Safari）
• 在iOS 4.0移动Safari（iPhone 4的）
• webOS的1.4.1（PALM PRE PLUS）

注：随着移动Safari除了在iOS 4.0，我在每个类别中只有一台设备测试。 如果有变化以外的操作系统上安装软件的设备或个人之间的差异，我的测试中不会检测到这些变化。 这些特殊的设备进行了测试，因为他们是我访问的，并不是因为我认为他们比其他设备更重要。

方法论

缓存测试是乏味的，但相对简单。

我写了一个微小的Sinatra的应用程序（ GitHub上餐桌吧！ ），生成一个响应组成的一个伪随机字母和空格字节的请求数量。 gzip压缩或解压缩的反应可以送达。 以下的远未来过期响应头发送，以确保所有的反应都认为可缓冲的：

的Cache-Control：max-age的= 315360000
到期日：星期五到2020年5月01日3时47分24秒GMT

在我的本地网络，然后我手动执行以下步骤，以每台设备上测试组件缓存：

1. 加载缓存测试索引页。
2. 点击一个链接到一个特定大小的组成部分，从5KB到20MB，并等待它完成加载。
3. 点击“后退”按钮。
4. 再次点击同一链接。 观察的随机字符是否是相同的，以及是否在服务器控制台打印请求的日志条目，以确定组件是否是缓存在第2步。
5. 重复和调整组件所需的大小来确定最大的组成部分，这将是缓存的大小。

要测试的页面缓存，我的表现基本上是相同的步骤，而不是攻链接再次在第4步，我拍了拍浏览器的前进按钮，使其使用页面缓存，而不是组件缓存除外。

通过调整服务器发送适当ETag Last-Modified ETag或Last-Modified响应头（单独测试）和省略远未来过期头，支持ETag和Last-Modified决心。 然后我检查服务器收到请求验证，浏览器发送的预期头If-None-Match If-Modified-Since步骤4头。

结果

我测试用gzip启用和禁用，但我发现，Gzip已没有任何设备上的效果可缓存 。 解压缩组件的大小是在所有情况下，重要的，不论是否该组件提供gzip压缩。 正因为如此，这里提到的所有组件的大​​小是未压缩的大小。

下表说明了我的整体结果。

机器人

Android浏览器表现出最好的缓存行为，所有测试设备。 虽然它似乎对各个组件的大小没有限制，总缓存大小似乎被限制在大约2MB，这意味着，个别元件，有效地限制为2MB，以及。

页面缓存出现了对单个页面的大小没有限制，高高兴兴地缓存每个字节，我把它，直到可用内存被耗尽，浏览器崩溃。

我惊喜地发现，Android的组件缓存存活浏览器重新启动和电源周期，iOS设备的壮举没有能够匹配。

可能的警告： Android的WebKit的源代码树的审查，使我相信，其高速缓存限制可能基于RAM和/或快闪记忆体上的特定设备上运行它提供的金额适应。 如果情况属实，这些数字可能只适用于Nexus One的。 事实上，如果未使用的内存，而不是总内存缓存大小相适应，这些数字可能只适用于我的Nexus One。

我可能错了，但在iOS 4.0测试结果的差异上的iPhone 3GS和iPhone 4支持这一理论。 （Android和移动Safari都是基于WebKit的浏览器，所以他们可能有共同的行为。）如果你熟悉WebKit源，可以更清楚地有鉴于此，请与我取得联系。

的iOS

跨越三个最新版本的iOS结果差异很大。 令人惊讶的是， 手机上的iOS 3.1.3的Safari没有任何规模的缓存组件 ，尽管有明显无限的页面缓存的大小。 这是令人不安的，因为它意味着的iOS 3.1.3用户可能获得一个次优的浏览体验，尤其是如果他们不使用WiFi。 无限的页面缓存的大小这里没有一点好处，因为它只涉及到为前进/后退导航发挥。 这种行为是从观察别人以前的IOS版本，我无法想象任何充分的理由，因为它显着的变化，所以我怀疑这可能是一个错误。

移动在iOS 3.2的Safari（这是唯一可以在iPad上）不会出现这个错误。 25.6KB组件限制和〜的281.6KB总缓存限制总比没有好，但他们仍显得微不足道测试的其他设备相比。 独特的iOS设备中，出现的iPad限制在页面缓存的页面大小25.6KB，作为其组成部分的大小限制相同。

在iOS 4.0移动Safari浏览器iPhone 3GS和iPhone 4上表现出不同的限制，这意味着限制适应的基础上可用的RAM（iPhone 3GS的有256MB，而iPhone 4有512MB测试两个设备有32GB快闪记忆体） 。 在iPhone 3GS上的iOS 4.0有51.199KB元件的大小限制了〜1.05MB总组件缓存大小。

组件的大小限制在iPhone 4上，几乎完全是两次在iPhone 3GS上的限制，在102.399KB。 总组件高速缓存的大小约为1.9MB。 也许是因为单独的iOS 3.2和iOS 4.0开发，而是从一个共同的祖先分支，出现的iOS 4.0的页面缓存大小一样的iOS 3.1.3测试，这两种设备的可用RAM只能由有限的。

iOS设备没有保留跨强制浏览器重新启动或设备的电源周期的缓存的内容，虽然他们没有保留高速缓存时，只是没有实际杀害的浏览器开关应用。

webOS的

我对webOS的测试结果不一致的，我对他们没有多大信心。 我已经包括了什么数据很少，我设法收集纯粹为了完整性。 请随身携带巨额粮食的盐。

作为近，因为我是能够确定的是，webOS的可能有大约1MB的各个组件的大小限制，与匹配的页面在页面缓存的大小限制。 我无法哄If-None-Match If-Modified-Since请求头的webOS，这意味着它不支持ETag和Last-Modified 。

在某些测试中，它出现的webOS的最大元件尺寸大于1MB，但是这是不一致的。 至于我可以告诉大家，webOS的出现有一个讨厌的错误，一定点后可能达到时的最大总缓存大小缓存完全停止工作，共直到手机电源循环。 在某些情况下甚至电源循环没有修复的缓存破损，所以我最终放弃了试图建立该问题的确切原因和WebOS的高速缓存的确切界限。

建议

基于这些结果，我开发测试设备的Web应用程序的人提供了以下建议：

• 使用远未来的缓存过期头。这将阻止发送一个条件GET请求，将提高webOS的缓存能力，它不支持浏览器ETag或Last-Modified 。
• 至少要等到iPad上的iOS 4.0到达，尽量限制个别组件大小为25.6KB或更少 ，解压缩。 并敦促您的iPhone的用户尽快升级到iOS 4.0。
• 如果您的网站必须支持的iOS 3.1.3用户（这是可能的），如果需要的组件比25.6KB较大，或者如果所有组件的总规模超过281.6KB较大，可以考虑使用HTML5的应用程序缓存 ， localStorage ，或数据库存储来存储您的组件。 Kessinger亚历克斯最近的锐博客后， 在脱机应用程序中使用YUI的3 ，您可能会感兴趣锐3开发商考虑这种做法。
• 做自己的测试。不要想当然地认为这些结果适用于任何测试的浏览器或设备的任何未来版本。 使用这些结果作为一个起点，但验证自己之前，您对移动缓存限制的假设为基础的重大决策。 闪电般的速度在移动浏览器世界的变化，因此本研究将有一个保质期很短。

我做我的测试代码可以在GitHub上 ，我鼓励你使用它，叉，分享你所学到的。

征集文件

浏览器制造商，请考虑记录和发布浏览器的缓存限制。 在桌面的世界里，这些限制通常是如此之高，是一个非问题，文件没有必要。 在移动世界中，浏览器缓存的限制是重要的信息，Web开发人员必须具有引人注目的特性，以创造高性能的网站。

localStorage和应用程序缓存等新功能的限制，通常是很好的证明。 请延长这一级别的文件以及组件缓存。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

在为2010年6月25日，野生

与往常一样，让我们的意见或知道yuilibrary @如果我们错过了一些重要的事情。

• YUI的3基合金的UI在Liferay的会议正式宣布 ：从新闻稿 ：“作为这种努力的一部分，Liferay的还宣布即时提供Liferay的合金界面 。 合金界面与雅虎YUI的项目合作开发，提供了一套丰富的用户界面组件快速创建用户友好的portlet，部件和Web应用程序。 合金的UI处理CSS，HTML和Javascript的复杂性，释放开发人员专注于业务需求和功能。 合金的UI也有助于解决一些常见的跨浏览器兼容性问题，通常消耗的项目资源。 新的图书馆并不需要一个门户网站，可以用来为任何Web应用程序开发组件。 布赖恩说：“陈，Liferay的 Liferay Portal的规范其前端周围合金的UI框架，扩大现代的基于门户的企业解决方案的简单性和能力。”合金的UI代表一个web开发的新功能，以简化开发丰富的用户界面，门户网站的创建者和首席软件架构师。 “我们很高兴与雅虎的团队已经在此工作和感受，以帮助其解决方案的开发，这将是一笔巨大的财富'，现在免费提供给在锐界锐3画廊所有合金的UI组件。
• AutoFusion的CarPrices.com推出使用YUI 3.1.1 ： 锐3画廊贡献者乔希·利扎拉加工作与Autofusion公司已上新CarPrices.com项目 ，采用了锐3.1.1公用事业和部件的主机。 乔希将在这个项目中的未来YUIBlog后有更多。
  
• 下载小队的的埃雷兹祖克曼建议的JS DEVS锐剧院观看克罗克福德写入埃雷兹：“ 道格拉斯·克罗克福德是一个天才。 严重-那家伙是辉煌的。 他是目前雅虎的首席JavaScript的建筑师服务，他发明了JSON （1广泛用于数据交换格式），他是在ECMAScript的委员会的家伙设置JavaScript标准的一部分，并具有非常广泛的了解编程通史“语言和计算机科学。 最近，克罗克福德了五个会谈的一部分雅虎的关于JavaScript 锐剧院 。 这些都是免费提供的，他们在长度超过五小时（更像是在六至七个小时，我觉得）。 这些会谈是如此凉爽的是，克罗克福德真的给你一个主题鸟瞰;第一个小时是历史，是真正迷人。 这是所有的地方，开始了Jackquad织机通过为什么我们有两个1删除和1我们的键盘上退格键，一直到现代的编程语言和JavaScript的，更多的埃雷兹的喜爱的JavaScript资源“， 检查了他的职位或前往JavaScript页面上的克罗克福德道格拉斯的最新视频（有更多的填充第二列锐剧院 ）。
  
• 马特·斯奈德在锐2的Mint.com，2010年威比得奖者恭喜 ：恭喜马特·斯奈德和其他Mint.com优秀的前端工程师为他们当之无愧的2010年金融服务类的威比奖造币厂已锐2年初以来 ，马特仍是一大贡献了YUI项目 。 你可以看到YouTube上马特的五字的接受提名的演讲 。
  
• 锐3才算是Ajax的翁Almaer评论Caridy帕蒂诺Mayea的预压库模块 ：翁有一个不错的职位上才算是Ajax审查预取和缓存资产帕蒂诺Mayea Caridy的预压模块 ，一个YUI 3画廊入口， 他写道：关于最近YUIBlog 。
  
• YUI的网格使用活字（@ foxxtrot）的 ：锐贡献者杰夫·克雷格他的锐2网格转换的Movable Type博客的经验中写道：“因此，任何人谁是看过我的博客前，你会看到，在周末我升级我的博客模板中使用的JavaScript锐网格和YUI3。 从MT的模板（或MTOS 4当我安装的第一个版本的标准模板），通过切换，我是能够减少近一半该死的HTML pageweight。 旧模板是真格的沉重，并有一吨额外的标记。 居多，被赶出的决定是希望我的博客重做的视觉感受，我觉得我可能下YUI的网格以及重写，而我这样做。“
• 内特Schutta比较为IBM DevelperWorks锐和Dojo ：为IBM developerWorks撰写内特Schutta比较锐2.x和Dojo的一个新的岗位。 虽然我们专注于YUI 3.x的代码行这些天，Nate的文章有一些有用的指引，为那些对JavaScript库的思想，使他们的企业或项目的决定。 首先 - 为什么YUI或Dojo的吗？

  与这么多优秀的选择，在您的处置，你为什么会考虑YUI或Dojo的吗？ 一个字：完整性。 不像其他的解决方案，涉及额外的库或插件，Dojo和YUI拥有一切（及以上），今天的前端工程师可以要。 虽然这既是一种祝福和诅咒，如果你在市场上是一个为你的Ajax需求的一站式，这是两个强有力的竞争者。 除了丰富的JavaScript佣工及公用事业，都提供了一流的部件和控制，远远超出了标准的浏览器有限的调色板。

  Nate的一般图书馆甄选准则的建议是有用的：

  • 你怎么想出来的吗？ 你要买的完全替代了几乎所有网页上的UI元素，或者你只是JavaScript编程有点疼痛？
  • 阅读代码是多​​么容易？ 尽管在过去几年的大规模改进文档，赔率是在某些时候，你将不得不挖成代码。 库之前，花一些时间，在没膝深源。 是很容易理解，还是连原作者有麻烦吗？
  • 文档有多好？ 干净和可读的代码可以弥补低于恒星文件的，但没有什么可以帮助您开始很喜欢教程和例子。 拨开周围的wiki或网站，看看他们所提供的。 是清晰和易于遵循？ 快速谷歌搜索，为您带来适当的一部分，他们的物质呢？
  • 什么是社会一样，围绕图书馆吗？ 退房的邮件列表。 有大量的流量吗？ 新人们被对待与尊重或嘲笑？ 已更新的代码被最近，或者是几年前的最后一个版本？
  • 你可以得到帮助吗？ 虽然这是关系到对社区前位，它总是宝贵的，发展社区环顾四周，看看谁在使用什么。 从某种意义上说，其中库简历经常检查工作委员会。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

锐：6月25日（星期五）营业时间

最新锐：营业时间将在本星期五，6月25日。

上周， 爱德华多·兰格伦向我们介绍了一些伟大的最近添 ​​加AlloyUI画廊模块。 讨论所涵盖的实例，配置，开发的决定，和他们的一些历史的TreeView模块。 但是，这仅仅是个开始。 我们还探讨了他们的IO 节点 ， 表单验证模块和一些可用的视觉样式上花了一些时间。 爱德华甚至给了我们一个新的Liferay的，公司门户网站，这一切辛勤工作的动力，先睹为快。 真正一流的工作。

所有这一切说，很难说，如果展示和告诉或谈话是真正的顶篷。 伟大的代码相关内容一边，有许多良好的反馈和讨论有关社区协作，画廊的性质，以及如何，我们可以和YUI更好。 因此，呼叫大家一个很大的感谢！

这一周，我们要涉足原料开发世界以及设计师的世界有点Caridy帕蒂诺我们谈论他的事件绑定模块，这里的特色就在今天上午 。 我们会做一个代码审查和讨论，有许多工作要做，甚至加载前锐的配置步骤。 这是正确的，纯粹的，纯粹的DOM脚本。 你可能要戴头盔。

然后我们会转移到同样细致入微的皮肤设计过程中，与杰夫康尼夫，雅虎负责当前各种滑块的外观和摸起来。 他会穿过他的视觉资产建设过程中，我们可以采取同样的月台幕门，并轻松地创建适合您的网站调色板的颜色为主题的资产。 这里是Photoshop文件，如果你想一起玩。 我也会谈论一​​些滑块在构建CSS和DOM结构所作出的决定。

我们又回到了平常的一天，这一周星期五上午十时至中午12时PDT。 有一个新的电话会议与会者代码 ，否则，连接的详细信息和往常一样。

1. 拨打1-888-371-8922（非美国的参与者，电子邮件的本地电话号码，我）
2. 输入与会者代码47188953＃
3. 加入屏幕共享会话 （会提示你安装的Adobe Connect插件，如果这是您第一次使用）

我还创建了一个版面的线程，这营业时间早，所以我们可以开始讨论！

此外，一如既往，你可以保持最新与即将到来的日程和议题后在Twitter @ yuilibrary或订阅YUI行事历 。

希望看到你！

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

在YUI 3画廊：帕蒂诺Mayea Caridy的事件粘结剂模块提供支持早期事件绑定和事件驱动的模块加载

本文介绍了我的事件的粘结剂模块 ，在YUI 3画廊最近公布。

YUI 3是在开发者社区得到良好的牵引力，采用最新的3.1.1版本和新的创新项目，在巨大的输液显着锐3画廊 。 许多开发商都获得约3 YUI的需求的性质，并开始在他们的设计中充分利用这些功能。 这种方法具有很大的优势，但它也可以提出一些新的挑战。

这些挑战之一是早期捕捉用户的交互。 即使在浏览器开始渲染页面，我们希望用户能够开始与页面元素进行交互。 在许多情况下，这些相互作​​用可能发生之前已完成的JavaScript初始化过程（包括扣押事件监听器）。

在许多情况下，您可以简化初始化代码，通过设置只有你的事件监听器，然后加入装件，你需要为每个用户交互的逻辑。 最近，在Facebook的工程师谈到了类似的方法，以提高加载过程- 从雷伊邦戈在JSConf 采访 。 下面是一个例子，这种技术可能会如何工作锐3：

  <脚本的src =“htt​​p://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js
 
	 3.1.1/build/oop/oop-min.js及3.1.1/build/event-custom/event-custom-base-min.js＆
	 3.1.1/build/event/event-base-min.js及3.1.1/build/dom/dom-base-min.js＆
	 3.1.1/build/dom/selector-native-min.js及3.1.1/build/dom/selector-css2-min.js＆
	 3.1.1/build/node/node-base-min.js“> </ SCRIPT>
 
锐（）。使用（功能（Y）“事件的基地'，{
     / /等待，直到用户输入元素的重点是启动加载资产
     y.on（“点击”功能（E）{
 
       y.use（ANIM'，'IO'，函数（）{
           / /加载远程内容，并显示它在这里使用的是动画
       }）;
 
       e.halt（）; / /停止传播
     }，“演示”）;
 }）; 

这介绍了一些在你的代码的复杂性，因为听众​​不仅要处理与用户的交互，但也有一些加载逻辑。 这种方法的另一个缺点是，你仍然有一些JavaScript代码加载在顶部（在这种情况下，YUI的种子，事件的工具，一些依赖）以至少定义的监听器和加载逻辑赶上早期行动。 因此，让我们考虑作为两个单独使用的情况下：

• 捕获早期用户交互
• 促进一些用户交互需求的性质

为了满足这些需求，我创建了一个新的模块锐3 。 我的主要重点一直是创建一个组件，而不影响您的应用程序逻辑。 这个新的模块被称为“ 画廊事件粘合剂 “，现在是通过YUI加载。

捕获早期用户交互

此功能的主要目标是保证用户交互排队，直到事件监听器被初始化。

让我们来看看事件粘结剂例如 ：

 锐（{
     / /最后廊建设这个模块
    画廊：画廊2010.06.07-17-52'
 }）（画廊事件粘结剂“，”事件“功能（Y）{
 
     y.on（'点击'功能（E）{
 
         / /做你的东西在这里
         e.halt（）; / /停止事件传播，如果你想......
 
     }，'＃演示“）;
 
     / /刷新早期的用户交互
     Y.EventBinder.flush（'点击'）;
 
 }）; 

在这个例子中，YUI加载器将尝试加载gallery-event-binder和event需求模块，一旦他们都准备好，随着它们的依赖，在回调函数中的代码（第三个参数）将被执行。 在执行过程中，一个监听器被设置为一个元素id=demo 。 这里的窍门是一次Y.EventBinder.flush('click')被调用时，系统会刷新一些可能发生的事件，在此之前的初始化代码被执行的点击。

配置

这种方法需要一些额外的配置，特别是的定义YUI_config作为一个全局变量来调整的YUI执行。 不要担心，这是很简单的。 让我们看一个具体的例子：

 
 YUI_config = {
     / /的标准YUI_config配置
    结合真实，
    过滤器：“最小”，
 
     / /事件粘结剂配置从这里开始
     eventbinder：{
         / /事件处理程序来存储要重新分派的事件。
         FN功能：（E）{
             VAR粘结剂= YUI_config.eventbinder
                过滤器= / yui3事件的粘结剂/
                容器（e.target | | e.srcElement），
                信息= {
                    目标：集装箱，
                    类型：e.type
                 };
 
             / /寻找一个类元素yui3事件的粘结剂
            而（容器&&！filter.test（container.className））{
                容器= container.parentNode;
             }
 
             （容器）{
                 （binder.q = binder.q | | []）推（INFO）;
 
                 / /防止此事件的默认浏览器的行动
                如果（e.preventDefault）{
                     e.preventDefault（）;
                 }
                返回（e.returnValue = FALSE）;
             }
         }，
         / /接口侦听特定事件
         listenFor：功能（类型）{
             VARð=文件;
             / /加载库之前，我们必须处理浏览器的不一致性
             （d.addEventListener）{
                 d.addEventListener（类型，this.fn，FALSE）;
             }否则{
                 d.attachEvent（''+类型，this.fn）;
             }
 
            返回本;
         }
     }
 };
 / /添加事件监测过程
 YUI_config.eventbinder.listenFor（'点击'）;

此代码应包括在页面的最顶端。 这将是短短的叮咬，一旦你缩小这个配置对象。 我建议生产中使用可缓存文件（外部），它包括在您的网页的头部分。 你可以阅读更多YUI_config和不同的配置，通过这个对象中的官方API文档 ，你可以调整。

最适合您，您可以修改这个配置，你关心以及定义事件。 在上面的例子中，我们增加了'点击'监视名单（最后一行）。 您可以使用链接到监控列表中添加多个事件：

  YUI_config.eventbinder.listenFor listenFor（'点击'）（'的keyup“）listenFor（”鼠标悬停“）。; 

这个功能如何工作？

一旦被执行的配置（即YUI_config ）逻辑，随着调用YUI_config.eventbinder.listenFor ，监听一个特定的事件类型，将被定义。 只有将监听监视冒泡的事件将被定义为document元素。 在此级别捕获用户交互时，它会进行分析，特别检查，如果目标元素或任何其祖先类名yui3-event-binder 。 如果是这样，该事件将被添加到队列中，将阻止该事件的默认行为。 这种技术提供了一个简单的方法来监视页面的特定区域的特定类型的互动。

执行此代码时，指定类型或类型的事件侦听器添加到document ，所以当这些事件的发生和泡沫（这只是监控事件，泡沫），他们将停止和他们的信息存储在处理队列。 后来，在您的use()回调初始化完成时，只需拨打Y.EventBinder.flush再发运的所有存储的点击事件，如果他们只是事件的模拟模块，然后礼貌发生。

促进一些用户交互需求的性质

此功能的主要目标是帮助开发人员定义加载基于用户交互的逻辑。

这里是另一个事件粘结剂例如 ：

 
锐（{
  模块：{
     “我的自定义模块”：{
       FULLPATH：'/我定制module.js的“
     }
   }
 }）（画廊事件粘结剂“，”节点“功能（Y）{
 
   / /设置一个'的'＃演示监听，并依靠“我自定义模块” 
   / /处理特定的事件。
   Y.EventBinder.on（'点击'，'我的自定义模块'，'＃试玩了'）;
 
   / /设置为所有的锚委托监听器列表中，并依靠  
   / /“我的自定义模块”和“我的另一个模块来处理这些特定事件
   Y.EventBinder.delegate（'点击'，['我的另一个模块“]，”＃我清单“，”李一“）;
 
 }）;

在这里，我们使用Y.EventBinder.on和Y.EventBinder.delegate定义了一些听众。 这两种方法总结Y.on和Y.delegate推动通过加载用户交互逻辑。 这让我们推迟页面上装载的特定功能，直到用户试图使用特定功能。

In this case, when a user clicks on one of the elements, we load one or more custom YUI modules that implement all the features associated with that particular click. Once those modules become available (and new listeners are set), the binder will flush the event that was on hold during the loading process to preserve the state of the action.

This feature doesn't require any initial configuration. Both of Event Binder's features can be used at the same time to cover early and on-demand user-interactions. In this case, you need to define the configuration, then set the on-demand listeners, and finally flush the early events.

Here's an end-to-end event binder example :

 
// configuration
YUI_config = { /* your custom event-binder configuration here */ };
YUI_config.eventbinder.listenFor('click')
 
// initialization
YUI({
  modules: {
    'my-custom-module': {
      fullpath: './my-custom-module.js'
     }
   }
}).use('gallery-event-binder', function(Y) {
  
  Y.EventBinder.delegate('click', ['my-custom-module'], '#doc', '.yui3-event-binder a');
  Y.EventBinder.flush('click');
 
 }）;

A more advanced configuration

You can modify the fn function in your configuration to be more selective about which events to queue and you can store more information about the events. Additionally adds a yui3-waiting class to the click target which we style in CSS to display a loading spinner:

 
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
 
    // event binder configuration starts here
    eventbinder: {
        // set of options that should be preserved for every event (all optional)
        eventProperties: [
            "ctrlKey", "altKey",
            "shiftKey", "metaKey",
            "keyCode", "charCode",
            "screenX", "screenY",
            "clientX", "clientY",
            "button",
            "relatedTarget"
        ],
 
        // listener callback function
        fn: function(e) {
            var binder = YUI_config.eventbinder,
                props = binder.eventProperties,
                filter = /yui3-event-binder/,
                target = (e.target || e.srcElement),
                container = target,
                info = {
                    target: target,
                    type : e.type
                },
                i;
 
            if (target.nodeType === 3) {
                // target is a text node, so use its parent element
                target = target.parentNode;
             }
 
            // look for an element with the class yui3-event-binder
            while (container && !filter.test(container.className)) {
                container = container.parentNode;
             }
 
            if (container) {
                target.className += ' yui3-waiting';
 
                // back up the event properties to simulate the event later on
                for (i = props.length - 1; i >= 0; --i) {
                    info[props[i]] = e[props[i]];
                 }
 
                (binder.q = binder.q || []).push(info);
 
                // prevent the default browser action for this event
                if (e.preventDefault) {
                    e.preventDefault();
                 }
                return (e.returnValue = false);
             }
        },
 
        listenFor: function(type) {
            var d = document;
 
            if (d.addEventListener) {
                d.addEventListener(type, this.fn, false);
             }否则{
                d.attachEvent('on' + type, this.fn);
             }
 
            return this;
         }
     }
 };
// add events to the monitoring process
YUI_config.eventbinder.listenFor('click');

Check out this event binder example to see this advanced configuration in action.

Conclusion:

For high performance web applications, it's important for pages to load and become responsive quickly. To accomplish this, we have to rely on on-demand loading techniques. Once you start using them, it's equally important to control user interactions that can happen before the corresponding code for an action become available.

Event Binder (gallery-event-binder) provides friendly APIs to deal with both use-cases without you having to change your application logic. It can be applied to any YUI 3 application without introducing extra complexity to your code.

Find conversations: bloglines | technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

Using the YUI 3 Calendar Date Selector from Alloy

The Alloy components (contributed by Nate Cavanaugh and Eduardo Lundgren from Liferay) in the YUI 3 Gallery are simple to use. This example illustrates the use of the Alloy calendar to progressively enhance a set of select elements for date selection.

Let's start with the markup — the HTML that will be on the page and functioning regardless of whether JavaScript is enabled. Alloy's Calendar module does not require this markup; you can feed it an empty element and it will create the select elements for you in the event that your use case would not benefit from progressive enhancement.

 <div id="calendar">
	<select class="yui3-datepicker-month" name="month" id="monthselect">
		<option value="0">
			一月
		</option>
		<option value="1">
			二月
		</option>

 ...

	</select>

        <select class="yui3-datepicker-day" name="day" id="dayselect">
		<option value="1">
			 1
		</option>
		<option value="2">
			 2
		</option>

 ...

	</select>

        <select class="yui3-datepicker-year" name="year" id="yearselect">
		<option value="2009">
			 2009
		</option>

 ...

	</select>
 </ DIV> 

With this markup in place (or with just an empty root element if we aren't progressively enhancing existing form fields), we bring in the Alloy Calendar module with datepicker selection support from the YUI 3 Gallery . This requires us to have YUI 3 on the page and then to follow the configuration step outlined on the module's Gallery page .

 <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script>
YUI({
	// All of this configuration information can be cut-and-pasted from the Gallery entry for
	// this module: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
    gallery: 'gallery-2010.06.07-17-52',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							gallery-aui-skin-classic/css/
							gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
         }
     }
}).use('gallery-aui-calendar-datepicker-select', function(Y) {
    var datePickerSelect = new Y.DatePickerSelect({
		displayBoundingBox: '#calendar',
		dateFormat: '%m/%d/%y',
		yearRange: [ 2009, 2012 ],
		dayField: Y.one("#dayselect"),
		dayFieldName: "day",
		monthField: Y.one("#monthselect"),
		monthFieldName: "month",
		yearField: Y.one("#yearselect"),
		yearFieldName: "year"
	}).render();
 }）;

 </ SCRIPT> 

Here's a live version of this simple example .

It's as simple as that. The configuration properties for datePickerSelect are lucidly defined in the Alloy documentation . In this example, the properties are used to set the root element, format the date, set the date range, and then wire up our existing select elements to the widget instance so that it knows which form fields to use for progressive enhancement. In practice, only the root element ( displayBondingBox ) is a required property.

Check out the YUI 3 Gallery roster for a full list of the Alloy UI contributions .

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

Implementation Focus: YUI 3 Powering Autofusion's ResearchPro

About the author: Josh Lizarraga is a YUI Contributor and frontend developer located in San Diego, California. He uses YUI to build rich frontend interfaces and Ajax applications for Autofusion, Inc. , a San Diego firm that offers web solutions to the automotive industry in the United States and Canada. When he's not on the clock, Josh enjoys contributing to the YUI project with test cases and Gallery modules.

About the Project

In addition to serving industry professionals, Autofusion provides end-user information resources via our CarPrices.com sister-site. “ResearchPro” is the name we've bestowed on our brand new car research application, which allows the user to quickly and easily find everything there is to know about a potential new car purchase.

Researching a new car before you buy is typically a daunting yet necessary experience, and the current options available to consumers are not very user-friendly. ResearchPro attempts to remedy these issues with a simple, guided approach to car research. We also take the experience one step further, allowing customers to receive a free quote on their dream car from local dealers.

Why YUI?

We started using YUI 2 for all of our frontend development about two years ago, and haven't looked back. YUI's focus on application development makes it a no-brainer for Autofusion, as we provide many embeddable web apps and widgets to our customers.

Over the years we have used just about every YUI 2 component there is in both our client web properties and our internal tools. YUI's proven track record and incredible documentation really set it apart from the other libraries we've worked with. The refinements to the library offered by YUI 3 made it an easy choice for this project.

How YUI is Utilized in the Project

ResearchPro makes use of several YUI 3 components, namely IO , JSON , Node , Event , Animation , and even the beta Slider widget. We're also using the selector-css3 and event-mouseenter modules, as well as a custom module that handles the JSON communication with the backend.

Challenges and Benefits of Using YUI 3

Migrating from YUI 2 to YUI 3 was both the largest challenge and the largest benefit during ResearchPro's development. Working with Node instances instead of DOM nodes directly can take some adjusting to at first, but we quickly found that this excellent abstraction greatly reduces the amount and complexity of the code for a given task. Likewise, the chainability of YUI 3 methods offers some great syntactic sugar that is hard to live without.

The primary challenge of the YUI 3 migration was and continues to be beta bugs. The first YUI 3 beta was released a few months before we started development, and we took that opportunity to start this project with the new codeline. We wanted to be familiar with YUI 3 once it replaces YUI 2 in our workflow down the road. During development, we discovered and reported several bugs, some of which are still being worked out today.

What's Next for Autofusion?

We are always developing new products with YUI and revising our existing offerings to incorporate YUI on the frontend. Our online inventory solution is powered by YUI 2, and we're currently planning a refined version of the product that will use YUI 3 in its place.

Our inventory interface makes heavy use of the Container module family, so hopefully by the time we start development YUI 3 will have implementations of Panel and Dialog. We've been very pleased with the rapid growth of features, and expect YUI to be our frontend toolkit of choice for years to come.

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

YUI: Open Hours, Wed June 16th

It's time again for YUI: Open Hours ! A change of schedule this week, though. The call will be on Wednesday .

I want to start by sending a huge thanks to Iliyan Peychev, Andrew Bialecki , Matt Snider , and Jacob Fogg for featuring their Gallery widgets in the last Open Hours. From Matt's game UI inspired Radial Menu to Iliyan's full featured Accordion , it was a great exploration of the types of UI tools you can find (or create) in the Gallery today as well as a study in different ways to use YUI 3 to solve UI challenges. You can find links to the modules in the May 21st Open Hours post , and a sampling of some of the interesting points from the discussion in the comments .

This week, hot on the heels of their huge YUI 3 Gallery contribution , Nate Cavanaugh and Eduardo Lundgren of Liferay, Inc. will be joining us to introduce us to some of the new AlloyUI modules. This is a pretty big deal. We've been working with these guys for months to get their 65 modules into the Gallery. That's right, 65 modules! All created by just Nate and Eduardo. Talk about productive.

Obviously we'll barely have time to scratch the surface of all the AlloyUI modules, but we will do a quick overview of some of the most interesting or popular ones and cover some “Getting started” code. There's such a variety of modules, there will be something for everyone.

• For YUI 3 newcomers or folks that have been waiting for the YUI 2 widgets to be migrated, there are now a lot more options to check out.
• For people wanting to take those first steps creating something in YUI 3, there are now more things to write plugins for, patch, or extend.
• For seasoned component developers, there's now a lot more implementation code to reference for evolving conventions and components to collaborate on.
• For more complex app developers, you can get a sense of one team's strategy for code submodularization and approach for building and packaging modules in a larger or more complex application.

Nate and Eduardo are open to whatever questions you have, so the conversation can go however deep, and in whichever direction you want. If you have any questions about a particular module or about anything else, ask away.

We're changing up a little this week and moving Open Hours to Wednesday . The time will be the same as before, though (10am – 12pm PDT), and the connection details are also the same:

1. Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
2. Enter the attendee code 4718 8953#
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

希望看到你！

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！