ヤフーユーザーインターフェイスブログ（YUIBlog）

YUI 3クイックヒント：独自の素晴らしい追加

ルーク（ @ ls_nが ）先日の質問に応答して、このスニペットを投稿して、私はそれが簡単なヒントとして、ここで共有する価値があると思いました。

ほとんどのセレクタベースのイディオムと同じように、YUI 3の表現力の多くは、1つまたは複数のHTMLElementsへの参照を持ったら、何ができるかから来ている-ノード参照を持つことを意味し、YUI 3では、あなたが通常を介して取得したY.one( selector string )またはY.all( selector string ) 。 だから、 Y.one("#foo"). doSomethingInteresting一般的なパターンです。

それは、ノード（および/またはのNodeList）に独自の魔法を追加することで、YUI 3の表現力を拡張するのは簡単です。 ここにあなたの拡張機能がモジュール化され、再利用可能にする1つの方法です。

まず、新しいカスタムモジュールを作成します（我々はそれを呼ぶことにnode++ ）：

  YUI.add（ 'ノード+ +'、関数（Y）{
	
	 / /の​​コンテキストで実行される関数を定義する
	 / /ノード·インスタンス：
	関数doSomethingAwesome（）{
		 Y.log（ "ここで素晴らしい何かを実行してください。"）;
	 }

	 / /ノードのプロトタイプにdoAwesomeThingを追加するためにaddMethodを使用します。
	 Y.Node.addMethod（ "doAwesomeThing"、doSomethingAwesome）;
	
	 / / NodeListsにこの機能を拡張します。
	 Y.NodeList.importMethod（Y.Node.prototype、 "doAwesomeThing"）;
	
 }、'0 .0.1 '、{必要があります：['ノード ']}）; 

ルークの要旨はこちらです 。

ページ上の定義では、 node++することができますuseの任意のインスタンスでdを。 実装コードでは、するだろう：

  YUI（）を使用します。（ 'ノード+ +'、関数（Y）{
	
	 / /単一のノードから使用します。
         Y.one（ '＃foo'）をdoAwesomeThing（）;

	 / / NodeListから使用します。
	 Y.all（ 'P'）doAwesomeThing（）;
	
 }）; 

あなたがバインドするための唯一のYUIインスタンス（複数可）ことに注意してnode++モジュールへのアクセスがありますdoAwesomeThing 。 複雑なアプリケーションを構築するあなたが好きだろうと、このデザインの特徴の一つは、実装ロジックは変更する必要はありませんということである場合の依存関係リストnode++の進化-で自動的に処理されているuse()時間、および依存関係宣言は、それに付随するコードでご利用いただけます。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！