YUI 3 IdleTimer 現在可以在 YUI Gallery 上使用

今天，YUI 工程師 Dav Glass 在 YUIConf 上介紹了 YUI Gallery。YUI Gallery 是 YUI 用戶和開發者分享他們工作的地方。您可以創建自己的 YUI 3 模塊，提交它們以供審核，並讓它們出現在圖庫中。作為額外的獎勵，提交的內容有資格在 Yahoo! 上分發。 CDN 以便其他人可以享受您的工作。貢獻的模塊包含各種信息，並且可以被任意數量的許可證所覆蓋。

Dav 邀請我為發布做一些貢獻，我立刻想到了我在帖子中介紹的 IdleTimer，Detecting if the user is idle with JavaScript and YUI 3. 我不得不進行一些更改以符合畫廊的發布規則，但功能保持不變。

變化

IdleTimer 最大的變化在於模塊名稱。所有圖庫模塊必須以“gallery-”開頭，以消除與標準 YUI 模塊的歧義並確保唯一命名。因此，IdleTimer 的模塊名稱從“idle-timer”更改為“gallery-idletimer”。

該文件的源代碼也大致相同。唯一的變化是它現在使用標準的 YUI 構建系統來生成分佈式 JavaScript 文件。這意味著添加 YUI.add() 的通用命名法 wrapper 會自動處理並生成三個版本的文件：一個調試版本，它的格式很好，可以查看並包含日誌語句，一個乾淨的源代碼版本沒有日誌語句，以及一個縮小版本。總體而言，生成的代碼與原始版本完全相同，只是不包括 YUI 模塊名稱。

用法

最令人興奮的變化是 IdleTimer 代碼現在可以在 Yahoo! CDN。這意味著您可以使用 YUI().use() 自動遠程加載文件 方法，它會自動為您引入適當的依賴項。基本用法如下：

YUI({

    //define a custom module
    modules: {
        'gallery-idletimer': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.28-14/build/gallery-idletimer/gallery-idletimer-min.js',
            requires: ["event","event-custom"],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-idletimer', function(Y) {

    Y.IdleTimer.subscribe("idle", function(){
        //handle when the user becomes idle
    });

    Y.IdleTimer.subscribe("active", function(){
         //handle when the user becomes active
    });

    //start the timer with a default timeout of 30s
    Y.IdleTimer.start();
});

注意開頭的“gallery-idletimer”模塊定義是讓YUI通過調用YUI().use("gallery-idletimer")自動加載正確資源的部分 . YUI Gallery 構建系統會自動生成此代碼作為示例以及 CDN URL。

更多信息

YUI Gallery 頁面上的 IdleTimer 包含您開始使用所需的所有信息。您可以從 YUI Gallery GitHub 位置或我的 JSTools GitHub 項目下載源代碼。 Dav 還寫了一篇關於如何提交到 YUI Gallery 的精彩教程。