YUI 3ギャラリーで：CaridyパティーニョMayeaのイベントバインダーモジュールは、事前バインディング、イベントとイベント駆動型のモジュールの読み込みのサポートを提供» Yahoo!のユーザーインターフェースのブログ（YUIBlogを）

YUI 3ギャラリーで：CaridyパティーニョMayeaのイベントバインダーモジュールは、事前バインディング、イベントとイベント駆動型のモジュールの読み込みのサポートを提供します。

中| 9時25分で6月23、2010 Caridyパティーニョで午前の開発、 YUI 3ギャラリー | 1件のコメント

この記事では私の紹介し、イベントのバインダーモジュール、最近YUI 3ギャラリーにリリースし、。

YUI 3は、最新の3.1.1リリースの重要な採用との新しい、革新的なプロジェクトの巨大な注入で、開発者コミュニティで優れたトラクションを得ているYUI 3ギャラリー。多くの開発者は、YUI 3のオンデマンドの性質の周りに彼らの頭部を得、それらの設計で活用するこれらの機能をし始めている。このアプローチは、大きな利点がありますが、それはまた、いくつかの課題を提示することができます。

これらの課題の一つは、初期のユーザーとの対話をキャッチすることです。ブラウザがページをレンダリングを開始したとしても、我々は、ユーザーがページ要素との対話を開始できるようにしたい。 JavaScriptの初期化プロセス（イベントリスナーの添付ファイルを含む）が完了する前に、多くの場合、それらの相互作用が起こる可能性があります。

多くの場合にのみ、イベントリスナーを設定して、すべてのユーザーとの対話に必要な部分をロードするためのロジックを追加して、初期化コードを合理化することができます。 -最近、Facebookのエンジニアは、ロードプロセスを改善するために似たようなアプローチについて語ったレイバンゴからインタビューを参照してください JSConf時を。ここでは、このテクニックは、YUI 3に働くかもしれない方法の例は、次のとおりです。

  <スクリプトのsrc ="http://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-カスタム/イベント - カスタムベース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-ネイティブmin.js＆3.1.1/build/dom/selector-css2-min.js＆3.1.1/build/node/node-base-min.js"> </ SCRIPT> YUI（）。使用する（"イベントベースアニム"、"IO"、関数（）'、関数（Y）{/ /待機するユーザは、資産Y.on（"クリック"、機能（E）{Y.useを（ロードを開始する入力要素に焦点を当ててまで" {/ /リモートのコンテンツをロードし、ここにアニメーションを使用してそれを表示}）; e.halt（）; / /伝播を停止}、"＃デモ"）;}）;

リスナーだけでなく、いくつかのロードロジックとユーザーとの対話を扱う必要がないため、これはコード内の複雑さを紹介します。このアプローチのもう一つの欠点は、まだ初期のアクションをキャッチするには、少なくともリスナーとローディングロジックを定義するために、最上位（この場合はYUIの種子、イベントのユーティリティ、およびいくつかの依存関係）でいくつかのJavaScriptコードをロードする必要があるということです。そう、の2つの別々のユースケースとしてこれを考えてみましょう：

これらのニーズに対応するために、私がのために新しいモジュールを作成しましたYUI 3 。私の主な焦点は、アプリケーションのロジックに影響を与えずに動作するコンポーネントを作成してきました。この新しいモジュールは、"と呼ばれるギャラリー-イベント-バインダー "とYUI Loaderを介して利用できるようになりました。

初期のユーザーとの対話をキャプチャする

この機能の主な目的は、イベントリスナーの初期化が完了するまで、ユーザーとの対話がキューイングされていることを保証することです。

見てみましょうイベントバインダーの例を：

  YUI（{
     / /最後のギャラリーは、このモジュールをビルドします
    ギャラリー："ギャラリー - 2010年6月7日- 17 - 52'
 }）。使用する（"ギャラリー - イベント - バインダー'、'イベント'の場合、関数（Y）{
 
     Y.on（'クリック'、機能（E）{
 
         / /ここに自分のものを行う
         e.halt（）; / /必要に応じてイベントの伝播を停止...
 
     }、'＃デモ'）;
 
     / /フラッシュ初期のユーザーとの対話
     Y.EventBinder.flush（'クリック'）;
 
 }）;

この例では、YUI Loaderはロードしようとするgallery-event-binderとeventオンデマンドでモジュールを、そしてかつて彼らは両方ともそれらの依存関係と一緒に準備が整ったら、コールバック関数（第三引数）内のコードが実行されます。実行中に、リスナーが持つ要素のために設定されているid=demo 。トリックはここにその一度されY.EventBinder.flush('click')と呼ばれる、システムがこの初期化コードが実行される前に起こったかもしれないのクリックイベントの一部をフラッシュします。

コンフィギュレーション

この手法は、いくつかの余分な設定を必要とする、特にの定義YUI_configグローバル変数としては、YUIの実行を調整する。心配しないで、それは非常に簡単です。詳細の例を見てみましょう：

 
 YUI_config = {
     / /標準YUI_config設定
    結合：真、
    フィルタ："分"、
 
     / /イベントのバインダーの構成はここから始まります
     eventbinder：{
         / /イベントハンドラを再送出するイベントを格納する。
         FN：関数（電子）{
             VARバインダー= YUI_config.eventbinder、
                フィルタ= / yui3 -イベント - バインダー/、
                コンテナ=（e.target | | e.srcElement）、
                情報= {
                    対象：容器、
                    タイプ：e.type
                 };
 
            クラスを持つ要素のための/ /ルックyui3 -イベント - バインダー
            一方、（コンテナ＆＆！filter.test（container.className））{
                コンテナ= container.parentNode。
             }
 
            場合（コンテナ）{
                 （binder.q = binder.q | | []）プッシュ（情報）;
 
                 / /このイベントのデフォルトのブラウザのアクションを防ぐ
                場合（e.preventDefault）{
                     e.preventDefault（）;
                 }
                リターン（e.returnValue =偽）;
             }
         }、
         / /インターフェイスの特定のイベントをリッスンする
         listenFor：関数（型）{
             VAR D =文書;
             / /ライブラリのロード前に、我々はブラウザの不整合に対処する必要があります
             {（d.addEventListener）場合
                 d.addEventListener（タイプ、this.fn、FALSE）;
             }他{
                 d.attachEvent（'on'に+型、this.fn）;
             }
 
            このを返します。
         }
     }
 };
 / /監視プロセスにイベントを追加
 YUI_config.eventbinder.listenFor（'クリック'）;

このコードは、ページの最上部に含まれている必要があります。あなたが一度それがわずか数刺されになる縮小するこの設定オブジェクトを。私は生産のためのキャッシュ可能（外部）ファイルを使用して、ページのheadセクションに含めることをお勧めします。あなたは詳細読むことができます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彼らがイベントをシミュレートモジュールのちょうど当時の礼儀を起こったかのようにすべて保存されているクリックイベントを再送出する。

一部のユーザーとの対話のオンデマンドな性質を容易に

この機能の主な目標は、開発者がユーザーとの対話に基づいてロードするロジックを定義できるようにすることです。

ここにあるのです別のイベントのバインダーの例は：

 
 YUI（{
  モジュール：{
     "私の - カスタムモジュール"：{
      フルパス："。/私の - カスタムmodule.js"
     }
   }
 }）。使用する（"ギャラリー - イベント - バインダー"、"ノード"、関数（Y）{
 
   / /'＃デモ"のリスナーを設定し、依存の'my -カスタムモジュール" 
   / /その特定のイベントを処理する。
   Y.EventBinder.on（'クリック'、'私の - カスタムモジュール'、'＃デモ'）;
 
   / /リスト内のすべてのアンカーのためにデリゲートのリスナーを設定し、依存している  
   "私の - カスタムモジュール"と、それらの特定のイベントを処理するために"私の - 別のモジュールを'on / /
   Y.EventBinder.delegate（'クリック'、['私 - 別のモジュール']、'＃mylistを'、'李A'）;
 
 }）;

ここでは、使用Y.EventBinder.onとY.EventBinder.delegateいくつかのリスナーを定義する。これら二つのメソッドをラップY.onとY.delegateユーザーとの対話を通してローディングロジックを駆動する。これにより、ユーザーが特定の機能を使用しようとするまで、私たちは、ページ上の特定の機能の読み込みを遅らせることができます。

このケースでは、ユーザが要素をクリックしたときに、我々は、その特定のクリックに関連するすべての機能を実装する1つまたは複数のカスタムYUIのモジュールをロードする。これらのモジュールが利用可能になった後（そして新しいリスナーが設定されている）、バインダーは、アクションの状態を保持するためのロードプロセス中に保留にしたイベントをフラッシュします。

この機能は、任意の初期設定を必要としません。イベントバインダーの機能の両方が早いとオンデマンドのユーザーインタラクションをカバーするために同時に使用することができます。このケースでは、オンデマンドのリスナーを設定し、設定を定義し、そして最終的には初期のイベントをフラッシュする必要があります。

ここです、エンドツーエンドのイベントのバインダーの例は：

 
 / /設定
 YUI_config = {/ *ここで、カスタムイベント、バインダーの設定* /};
 YUI_config.eventbinder.listenFor（'クリック'）
 
 / /初期化
 YUI（{
  モジュール：{
     "私の - カスタムモジュール"：{
      フルパス："。/私の - カスタムmodule.js"
     }
   }
 }）。使用する（"ギャラリー - イベント - バインダー"、関数（Y）{
  
   Y.EventBinder.delegate（'クリック'、['私 - カスタムモジュール']、'＃ドキュメント'、'。yui3 - イベント - バインダーA'）;
   Y.EventBinder.flush（'クリック'）;
 
 }）;

さらに高度な設定

あなたが変更することができますfnどのイベントをキューに約より選択的にコンフィギュレーション内の関数を、あなたは、イベントに関する詳細情報を格納することができます。さらに追加されますyui3-waiting CSSで私たちはスタイルがロードスピナーを表示するにはクリックしてターゲットのクラスは：

 
 YUI_config = {
     / /標準YUI_config設定
    結合：真、
    フィルタ："分"、
 
     / /イベントのバインダーの構成はここから始まります
     eventbinder：{
         / /イベントごとに保存されるべき一連のオプション（すべてオプション）
         eventProperties：[
             "CTRLキー"、"Altキー"、
             "シフトキー"、"metaKey"、
             "キーコード"、"charCodeは"、
             "screenXの"、"screenYの"、
             "clientX"、"clientY"、
             "ボタン"、
             "relatedTarget"
         ]、
 
         / /リスナーのコールバック関数
         FN：関数（電子）{
             VARバインダー= YUI_config.eventbinder、
                小道具= binder.eventProperties、
                フィルタ= / yui3 -イベント - バインダー/、
                ターゲット=（e.target | | e.srcElement）、
                コンテナ=ターゲット、
                情報= {
                    ターゲット：ターゲット、
                    タイプ：e.type
                 }、
                 I;
 
            場合（target.nodeType === 3）{
                 / /ターゲットがテキストノードであるため、その親要素を使用します。
                ターゲット= target.parentNode。
             }
 
            クラスを持つ要素のための/ /ルックyui3 -イベント - バインダー
            一方、（コンテナ＆＆！filter.test（container.className））{
                コンテナ= container.parentNode。
             }
 
            場合（コンテナ）{
                 target.className + ='yui3ウェイティング';
 
                 / /バックイベントのプロパティは、後でイベントをシミュレートする
                 {（I -  - ;私> = 0 1 I = props.length）用
                    情報[小道具[I]] = E [小道具[I]];
                 }
 
                 （binder.q = binder.q | | []）プッシュ（情報）;
 
                 / /このイベントのデフォルトのブラウザのアクションを防ぐ
                場合（e.preventDefault）{
                     e.preventDefault（）;
                 }
                リターン（e.returnValue =偽）;
             }
         }、
 
         listenFor：関数（型）{
             VAR D =文書;
 
             {（d.addEventListener）場合
                 d.addEventListener（タイプ、this.fn、FALSE）;
             }他{
                 d.attachEvent（'on'に+型、this.fn）;
             }
 
            このを返します。
         }
     }
 };
 / /監視プロセスにイベントを追加
 YUI_config.eventbinder.listenFor（'クリック'）;

このチェックアウトイベントのバインダーの例をアクションでこの高度なコンフィギュレーションを確認する。

結論：

高パフォーマンスのWebアプリケーションの場合、それはページをロードしてすぐに応答しなくなることが重要です。これを達成するために、我々は、オンデマンドローディングのテクニックに依存する必要があります。ひとたびそれらを使い始める、それがアクションに対応するコードが利用可能になる前に起こることができるユーザーインタラクションを制御することも重要です。

イベントバインダー（ギャラリー-イベント-バインダー）は、アプリケーションのロジックを変更することなく、両方のユースケースに対処するための友好的なAPIを提供します。それはいずれにも適用することができますYUI 3コードに余分な複雑さを導入することなくアプリケーション。

共有し、拡張する： del.icio.usでブックマーク | Diggそれ！ | のreddit！

1件のコメント

こんにちは、これは素晴らしい見えます。
EventBinder.delegate + YUI3は、ディスパッチャがsuperflousしないでください？この詳細に説明します？
コメントby パオロNesti - 2011年1月17日＃

申し訳ありませんが、コメントフォームはこの時点で閉じられます。

を搭載ワードプレスでヤフーウェブホスティング。

Yahoo!のユーザーインターフェイスブログ（YUIBlog）

YUI 3ギャラリーで：CaridyパティーニョMayeaのイベントバインダーモジュールは、事前バインディング、イベントとイベント駆動型のモジュールの読み込みのサポートを提供します。

初期のユーザーとの対話をキャプチャする

コンフィギュレーション

一部のユーザーとの対話のオンデマンドな性質を容易に

さらに高度な設定

1件のコメント

TwitterでYUIライブラリ

JavaScriptのビデオシリーズのクロックフォード

翻訳

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

コメントポリシー

ヤフーになる

メタ：

Yahoo!のユーザーインターフェイスブログ（YUIBlog）

YUI 3ギャラリーで：CaridyパティーニョMayeaのイベントバインダーモジュールは、事前バインディング、イベントとイベント駆動型のモジュールの読み込みのサポートを提供します。

初期のユーザーとの対話をキャプチャする

コンフィギュレーション

一部のユーザーとの対話のオンデマンドな性質を容易に

さらに高度な設定

1件のコメント

TwitterでYUIライブラリ

JavaScriptのビデオシリーズのクロックフォード

翻訳

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ブログロール

コメントポリシー

ヤフーになる

メタ：