Yui 3：より軽く、より速く、使いやすい

キーテイクアウト

ユイの完全な書き直しであるYui 3は、前任者であるYui 2よりも軽く、より速く、使いやすいことを目指しています。
• Yui 3ライブラリは、ユーザーがノードとウィジェットに独自の機能を追加できる新しいプラグインアーキテクチャを導入します。ライブラリはまた、古いYahooグローバルオブジェクトを置き換える新しいグローバルオブジェクト名Yuiも紹介しています。これにより、Yuiの古いバージョンがYui 3と共存することができます。
Yui 3は、よりクリーンで、より簡潔なコーディングスタイルと、すべてのYuiコンポーネントで一貫した内部力学とAPIを可能にするクラスの新しい階層を備えています。ライブラリはまた、機能性をより小さなサブモジュールに分割することにより、1つまたは2つの機能のためだけにライブラリの重い部分をロードするという問題に取り組んでいます。
• ライブラリの新しいバージョンは、ノードユーティリティを使用してDOMの新しい抽象化レイヤーを導入し、DOMの相互作用を簡素化します。 Yui 3は、すべてのブラウザの正規化を処理するイベントファサードのアイデアを使用して、イベント管理を正常化します。
Yui 3は、新しいイベントシステム、新しいモジュールシステム、新しい属性システムなど、新しい機能を備えた、Web開発のためのより柔軟で効率的なライブラリを提供します。また、DOM操作用のノードやノデリスト、AJAXリクエスト用のIO、再利用可能なUIコンポーネントを作成するためのウィジェットなどの新しいユーティリティとウィジェットも導入します。
2008年8月、Yahooユーザーインターフェイスチームは、Yui 3の最初のプレビューリリースをリリースしました。
• なぜ彼らはすでに有用で成熟したライブラリを書き直すのでしょうか？さて、Yui 2が成熟するにつれて、それが構築された方法も進化しました。
その結果、最初から存在していたYuiの一部は、後で追加された部分とはまったく異なる方法でコード化されました。その結果、ライブラリには内部メカニックとAPIの両方に矛盾が含まれていました。そのため、チームは、図書館を基本に戻し、ゼロから再構築することを決めました。彼らの計画は、過去3年間でYuiに取り組んで得た経験を適用し、より軽く、より速く、使いやすいライブラリを構築することでした。最後に、ライブラリを可能な限り柔軟にするために、Yui 3は、ノードとウィジェットに独自の機能を追加できる新しいプラグインアーキテクチャを紹介します。そのようなプラグインが少し後でアクションを行います。まず、Yui 3で新しいものを見てみましょう

さようならyahoo、こんにちはyui

Yui 3コードの例を見るときに最初に気付くのは、使用する新しいグローバルオブジェクト名です。古いYahooグローバルオブジェクトは、新しいYui Globalオブジェクトに置き換えられました。いくつかの理由で名前が変更されました。ユーザーのフィードバックは、一部の企業がコードにYahooの名前を持っていることを嫌っていることを示唆しました。しかし、さらに重要なことは、Yuiの古いバージョンが異なる変数名を持っているため、Yui 3と共存できるようにすることです。

および改名されるグローバルオブジェクトと同様に、その使用法は2.xとは根本的に異なる原理に基づいています。まず第一に、それはもはや静的オブジェクトではなく、実行するとそれ自体のインスタンスを返す関数です。これで、Yuiのすべての実行は、ページ上の他のインスタンスのYuiのインスタンスを妨害することなく、ライブラリのバージョンとすべてのロードされたコンポーネントのバージョンが実行できる自己完結型環境を返します。さらに、これは、YUIオブジェクトの異なるバージョンをインスタンス化することにより、ライブラリの複数のバージョンが同じページに共存できることも意味します。以下の例は、この原則を示しています：

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

ここで、Yui（）が実行されます。これは、使用方法が実行されるライブラリのインスタンスを返します。最低2つのパラメーターが必要です。ライブラリコンポーネント、次に、すべてが実行されたら実行するコールバックです。上記の例では、使用するために渡された最初の2つのパラメーターは、ロードされるライブラリコンポーネントの名前です。最終的なパラメーターは、オブジェクト（例でyという名前のy）を受信するコールバック関数です。これは、すべてのロードされたコンポーネントを含むライブラリのインスタンスです。したがって、上記の例のコメントと同様に、ドラッグアンドドロップコンポーネントはY.DDで見つけることができ、アニメーションコンポーネントはY.Animにあります。

よりクリーンで、より簡潔なコーディングスタイル

チームが抱えている主な懸念の1つは、すべてのYUIコンポーネントにわたって一貫した内部力学と一貫したAPIを確保することでした。したがって、Yui 3には、まさにそれを許可するクラスの新しい階層があります。たとえば、属性クラスは、Get and Setメソッド、初期構成サポート、および属性の変更イベントを継承するクラスに提供します。また、属性から継承するベースクラスがあり、そこから継承するすべてのクラスの初期イザーやデストラクタメソッドなど、すぐに使用できるオブジェクト指向の機能を提供します。最後に、ベースから継承するウィジェットクラスを構築し、レンダリング方法などのウィジェットが通常使用する共通の機能を提供しました。これは、ウィジェットのレンダリングを管理するための一般的なモデルビューコントローラー構造と、共通ウィジェット属性のサポートを提供します。また、プラグインの登録とアクティベーションサポートも提供しています

別の問題Yui 3の克服は、スクリプトがその中に含まれる1つまたは2つの関数のみでライブラリの重い部分をロードする必要がある場合です。たとえば、YUI 2では、XMLHTTPREQUEST呼び出しを行うために、接続ユーティリティ全体（重量38kb、12kb）を含める必要があります。 Yui 3は、機能をより小さなサブモジュールに分割することにより、この問題を解決します。そうすれば、XMLHTTPREQUESTコールを作成するためだけにユーティリティ全体を引き下げる必要はありません。 YUI 3では、IOユーティリティのIOベースモジュールを引き下げて、わずか19kb（4KBの削除）を計量するだけでXMLHTTPREQUESTコールを行うことができます。実際、IOユーティリティ全体の重量は29kb（7kbの縮小）であり、その前身よりもはるかに機能が豊富です。たとえば、IO-XDRサブモジュールでクロスドメインまたはXdomainRequestの呼び出しを行うことができるようになりました。

選択とチェーン

Yui 2はセレクターエンジンを導入しましたが、図書館の人生の少し遅れてそうしました。その結果、ライブラリ全体は、古い学校の要素フェッチングテクニックを中心に構築されています。言い換えれば、参照が必要なときはいつでも要素のIDまたは要素自体を渡しましたが、それはそれについてでした。ただし、Yui 3を使用すると、セレクターエンジンがライブラリのまさにその中心に構築されています。すべての部分に浸透して、CSSセレクター文字列を事実上どこでも渡すことができます。要素の参照が必要です。コンストラクターだけでなく、イベントハンドラーのセットアップやユーティリティの操作も含まれます。これが例です。これにより、クラスの著者がドラッグ可能な最初の要素を作成します。

var dd = new y.dd.drag（{
   ノード： '.author'
}）;

Yui 3に戻る論理値がないときはいつでも、メソッドをチェーン可能にしようとします。以下は、そのような例です：

ここで、クラス名の著者で最初の要素を参照し、それにカーソルスタイルを設定しました。

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

ノードとイベントfaã§ades

Yui 3は、ノードユーティリティを使用してDOMの新しい抽象化レイヤーを導入します。 YUI 3は、DOM要素への参照を返すのではなく、ノードとノデリストを返し、DOMの相互作用を大幅に簡素化します。これは、個別の関数に移動する必要があるのではなく、ノードがそれらと対話するために必要なすべての機能が含まれるためです。さらに、ノードによって公開される方法は、必要なときにいつでもブラウザの正規化に対処し、それらと協力する経験はできるだけ痛みがありません。 Yui 2に要素にクラス名を追加するために書かなければならないものは次のとおりです。

yui 3では、これが

になります

Y.get('.author').setStyle('cursor', 'move');

実際には、ノードがすでに手元にある場合は、NavProductsという名前の変数で、これを行うことができるだけです。

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Yui 3は、DOMとの相互作用を簡素化し、イベントファーデのアイデアを使用してイベント管理も正規化しました。すべてのイベントリスナーは、すべてのブラウザの正規化を処理するイベントFa§adeを受け取ります。したがって、たとえば、Yui 2では、「デフォルトを防ぐ」ために次のコードが必要でした。

Y.get('.author').setStyle('cursor', 'move');

今、あなたがする必要があるのは：

だけです

YAHOO.util.Dom.addClass("navProducts", "selected");

さらに、この動作は純粋にカスタムイベントにも拡張されているため、これらでもデフォルトを防ぎ、伝播を停止できるイベントfa§adesを受け取ります。

次：これらの新しい方法のいくつかを実践しましょう。

お金を見せて！

Yui 3がどれだけ簡単で強力なYui 3を使用しているかを示す簡単な例ページを作成しました。記事のスペースをここに保存するために、すべてのマークアップとコードを表示することは避けますが、例のページで完全なソースを表示できます。

最初のタスクは、アニメーションユーティリティ、スライダーウィジェット、Menunavノードプラグイン、およびドラッグアンドドロップユーティリティを使用して、Yuiのインスタンスをロードすることです。 Yuiは、Yahooサーバーから必要なファイルとその依存関係を取り出します。次に、ロードされたコンポーネントをコールバック関数に使用してYuiのインスタンスを返します。これは、yという名前の変数で受信します。

次に、ページの内容を表示するためのシンプルなアニメーションを作成します。これを行うために、新しいアニメーションオブジェクトをインスタンス化します。 IDメインを使用して要素への参照を渡し、現在の場所から最上位値を0にアニメーション化するように指示します（現在、例のページのマークアップで指定されているように-1000pxです）。また、アニメーションには3秒かかり、Elasticout Easing Methodを使用する必要があることも指定します。オブジェクトがインスタンス化されると、実行方法を使用して実行するという単純なケースです。

次に、ユーザーがページのベースフォントサイズを調整できるようにスライダーオブジェクトを設定します。 YuiのフォントCSS（例のページに含まれる）は、ページのベースフォントサイズを13ピクセルに設定します。これは、他のすべてのフォントサイズが計算されるボディ要素にフォントサイズの値を設定することで行います。これは、ページ全体のフォントサイズを変更するために操作しようとしているものです。

Y.get("#navProducts").addClass("selected");

ボディ要素のノード参照をつかみます。これは、スライダーと組み合わせて後で使用されます。次に、スライダーウィジェットを作成します。最小値を13に、最大値を28に設定します。これは、フォントサイズをこれらの値内にとどめる必要があるためです。次に、スライダーのレールサイズが幅100ピクセルであることを確認します。最後に、スライダーの親指の画像を設定します（Yahooのホストサーバーから直接ロードされます）：

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

スライダーがインスタンス化されると、それをレンダリングするのは簡単な問題です。これを行い、スライダーのレンダリングメソッドをレンダリングしたい要素のクラス名を呼び出します。スライダーウィジェットは、そのクラス名に一致するDOMの最初の要素でレンダリングされます。

Y.get('.author').setStyle('cursor', 'move');

今やるべき唯一のタスクは、ページのフォントサイズを実際に調整するようにスライダーを配線することです。これは、アフターイベントに接続することで行います。 Yui 3には、以前のバージョンよりもこのようなイベントの処理を簡単に行うために、フックに接続して以降に標準を備えています。さて、ValueChangeイベントが解雇されるたびに、ボディエレメントのフォントスタイル値が変更されます。

ナビゲーションメニューも設定しました。ページのコンテンツの準備ができたら、MenunavノードプラグインをNAVノードに接続します。次に、見つけたマークアップに基づいてナビゲーションメニューを自動的にセットアップします。コードは次のとおりです

YAHOO.util.Dom.addClass("navProducts", "selected");

最後に、新しいドラッグアンドドロップオブジェクトをインスタンス化して、写真のクラス名への参照を渡すだけで、あなたの写真を本当にドラッグ可能にします。 オブジェクトが作成されるとすぐに、画像はドラッグ可能です。追加のタッチとして、マウスカーソルが画像の上に浮かぶときに変更して、画像がドラッグ可能であることが明らかになります。

Y.get("#navProducts").addClass("selected");

要約

あなたが見ることができるように、Yui 3はその前身とはまったく異なる動物です。新しい構文に加えて、より速く、軽量で、より簡単で、より柔軟なライブラリを獲得します。最も野心的なWebプロジェクトを採用する準備ができています。 これが入門書であるのを見て、Yui 3で可能なことの表面をかろうじて傷つけました。詳細については、Yui 3.xプレビューリリース2ページ、Yui 3に関するSatyen Desaiのプレゼンテーション、Yui 3フォーラムをご覧ください。

navProducts.addClass("selected");

Yui 3

に関するよくある質問

Yui 3の新機能は何ですか？Yui 3は、Web開発をより簡単かつ効率的にするために設計された多くの新機能を紹介します。これらには、より柔軟なイベント処理を可能にする新しいイベントシステム、モジュールの読み込みと使用のプロセスを簡素化する新しいモジュールシステム、およびオブジェクトプロパティを操作するための一貫したAPIを提供する新しい属性システムが含まれます。さらに、YUI 3には、DOM操作用のノードやノデリスト、AJAXリクエスト用のIO、再利用可能なUIコンポーネントを作成するためのウィジェットなど、多くの新しいユーティリティとウィジェットが含まれています。モジュールの依存関係、そしてモジュールの機能を実装します。モジュールの依存関係はモジュール名の配列として指定され、モジュールの機能は、YUIインスタンスを引数として受信する関数として実装されます。この関数は、モジュールのメソッドとプロパティを定義する場所です。

Yui 3の新しいイベントシステムはどのように機能しますか？

​​

Yui 3の新しいイベントシステムは、イベントターゲットとイベントハンドラーの概念に基づいています。イベントターゲットは、イベントを放出できるオブジェクトであり、イベントハンドラーはそれらのイベントに応答する関数です。 EventTargetクラスを拡張してイベントターゲットを作成し、on（）メソッドを使用してイベントハンドラーをイベントターゲットに添付できます。このシステムは、イベントの処理方法に高度な柔軟性を可能にします。これにより、読み取り専用か書き込みのみであるか、デフォルト値があるかどうか、値が変更されたときに変更イベントをトリガーするかどうかなど、特定の特性セットで属性を定義できます。このシステムにより、明確に定義されたインターフェイスを備えたオブジェクトを簡単に作成できます。

YUI 3のIOユーティリティをAJAXリクエストに使用するにはどうすればよいですか？ IO（）メソッドを使用して、リクエストを送信できます。URL、リクエストメソッド（取得または投稿）、およびリクエストで送信されるデータを指定できます。 IO（）メソッドは、トランザクションオブジェクトを返します。これを使用して応答を処理できます。 Y.ONE（）メソッドを使用して、単一のDOM要素への参照を取得し、Y.ALL（）メソッドを取得して、要素のコレクションを表すノデリストを取得できます。これらのメソッドは、ノードとノデリストのインスタンスを返します。これは、それらが表す要素を操作するための多くの方法を提供します。

YUI 3のウィジェットユーティリティを使用して再利用可能なUIコンポーネントを作成するにはどうすればよいですか？ウィジェットは、本質的に特定の機能をカプセル化する視覚コンポーネントです。ウィジェットクラスを拡張し、ウィジェットの動作と外観を定義するメソッドとプロパティを実装することにより、ウィジェットを作成できます。このメソッドは、ロードするモジュールの名前を引数として、およびモジュールがロードされたら実行するコールバック関数を取得します。コールバック関数は、ロードされたモジュールへのアクセスを提供する引数としてYUIインスタンスを受信します。このメソッドは、指定されたメッセージでエラーをスローし、オプションでエラーを記録し、現在のコードブロックの実行を停止します。トライ/キャッチブロックを使用して、Y.Error（）によってスローされたエラーをキャッチして処理できます。

YUI 3のクラスを拡張するには、YUI 3のクラス拡張機能はy.extend（）メソッドを使用して行われます。この方法は、作成するクラスのコンストラクター、拡張するクラスのコンストラクター、および新しいクラスに追加するメソッドとプロパティを含むオブジェクトを引数として取得します。新しいクラスは、拡張するクラスのすべての方法とプロパティを継承し、3番目の引数で指定された方法とプロパティを追加またはオーバーライドします。

以上がYui 3：より軽く、より速く、使いやすいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。