在YUI 3畫廊：帕蒂諾Mayea Caridy的事件粘結劑模塊提供支持早期事件綁定和事件驅動的模塊加載

2010年6月23日，9:25上午Caridy帕蒂諾，在發展中， YUI 3圖庫 | 1條評論

本文介紹了我的事件的粘結劑模塊 ，在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推動通過加載用戶交互邏輯。 這讓我們推遲頁面上裝載的特定功能，直到用戶試圖使用特定功能。

在這種情況下，當用戶點擊的要素之一，我們加載一個或多個自定義銳模塊，實現與特定的點擊的所有功能。 一旦這些模塊成為可用（設置新的聽眾），粘結劑，將刷新，在加載過程中保持行動的狀態保持的事件。

此功能不需要任何初始配置。 事件綁定的功能，既可以用來在同一時間，包括早期和點播用戶相互作用。 在這種情況下，你需要定義的配置，然後設置上的需求的聽眾，最後沖洗的早期事件。

下面是最終結束事件粘結劑的例子 ： 

 
 / /配置
 YUI_config = {/ *您的自定義事件粘結劑配置* /};
 YUI_config.eventbinder.listenFor（'點擊'）
 
 / /初始化
銳（{
  模塊：{
     “我的自定義模塊”：{
       FULLPATH：'/我定制module.js的“
     }
   }
 }）。使用（畫廊事件粘結劑“，功能（Y）{
  
   Y.EventBinder.delegate（'點擊'，['我的自定義模塊'，'＃DOC yui3事件binder一個。'）;
   Y.EventBinder.flush（'點擊'）;
 
 }）;

更先進的配置

您可以修改fn在您的配置功能，是更多的選擇性事件排隊，你可以存儲更多的關於事件的信息。 另外增加1 yui3-waiting點擊的目標，我們在CSS樣式來顯示加載微調的類： 

 
 YUI_config = {
     / /的標準YUI_config配置
    結合真實，
    過濾器：“最小”，
 
     / /事件粘結劑配置從這裡開始
     eventbinder：{
         / /設置每一個事件，應保留的選項（所有可選）
         eventProperties：
             “中ctrlKey”，“Alt鍵”，
             “shiftKey”，“metaKey”
             “的keyCode”，“則charCode”
             “screenX”，“screenY”
             “clientX”，“clientY”
             “按鈕”
             “relatedTarget”
         ]
 
         / /監聽回調函數
         FN功能：（E）{
             VAR粘結劑= YUI_config.eventbinder
                道具= binder.eventProperties
                過濾器= / yui3事件的粘結劑/
                目標=（e.target | | e.srcElement），
                容器為目標，
                信息= {
                    目標：目標，
                    類型：e.type
                 }，
                我;
 
             （target.nodeType === 3）{
                 / /目標是一個文本節點，所以使用它的父元素
                目標= target.parentNode;
             }
 
             / /尋找一個類元素yui3事件的粘結劑
            而（容器&&！filter.test（container.className））{
                容器= container.parentNode;
             }
 
             （容器）{
                 target.className + ='yui3等待“;
 
                 / /備份的事件屬性來模擬事件後
                 （I = props.length  -  1> = 0;  -  I）{
                    信息[道具[I] = E [道具[I];
                 }
 
                 （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（'點擊'）;

退房此事件粘結劑的例子，在操作中看到這種先進配置。

結論：

為高性能Web應用程序，它是重要的頁面加載，並成為快速反應。 要做到這一點，我們必須依靠按需加載技術。 一旦你開始使用它們，這是同樣重要的控制用戶交互可以發生相應的代碼前一個動作變得可用。

事件粘合劑（畫廊事件粘結劑），提供友好的API來處理兩個用例，而不必改變應用程序的邏輯。 不引入額外的複雜性，你的代碼，它可以應用於任何YUI的3個應用程序。

找到的談話： bloglines technorati

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

1條評論

  1. 嗨，這看起來不錯。
    不要EventBinder.delegate + YUI3使調度員superflous？ 你會解釋一下？

    評論由保羅NESTI - 2011年1月17日， ＃

很抱歉，評論已被封閉，在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機 。