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推動通過加載用戶交互邏輯。 這讓我們推遲頁面上裝載的特定功能，直到用戶試圖使用特定功能。

在這種情況下，當用戶點擊的要素之一，我們加載一個或多個自定義銳模塊，實現與特定的點擊的所有功能。 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);
            } else {
                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.

結論：

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.

找到的談話： 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 .

Hope to see you there!

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！