YUI 3.0 Preview

技術全般 Javascript

YUI 3.0 Preview を、ほんの少しみてみました。

ざっと斜めに見てみた感じでは、機能セットは 2.x とそこまで大きく変わらないように見受けられる (Queue とかもあったかな) のですが、書き方の雰囲気は結構変わってます。良くも悪くも 2.x は質実剛健な感じがしていたのですが、jQuery などのような、柔軟で手軽、かつ強力、といった雰囲気をまといつつあるような感じです。ほぼサンプル見ながらの写経ですが、以下のような雰囲気。

<html>
<head>
<title>YUI 3.0 sample 01</title>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui.js"></script>
</head>
<body>

<ul id="zeon">
	<li>ザク</li>
	<li>ドム</li>
	<li>ゲルググ</li>
</ul>

<script type="text/javascript">
    YUI().use('node', function(Y) {
        Y.all("#zeon li").setStyles( {
            "color" :"red"
        });
    });
</script>
</body>
</html>

地味に結構好きなのが、YUI は library 自体を、ダウンロードして、解凍して、パスを通して、、、という手間なく、さっと試せる所ですね。斜め読みですが、use で何してるんだろう、と思いきや、モジュールの依存関係を解決して、Loader でダイナミックに script を足し込んでるようです。以下のようなのがそっと head に追加されてました。

<script id="yui__dyn_0" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/combo?3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/build/dom/dom-min.js&3.0.0pr1/build/node/node-min.js">

今日はこれくらいで。。。