YUI 3.x Preview Release 1

Javascript

http://developer.yahoo.com/yui/3/
YUI!3がまだ正式ではないけどリリースされたので触ってみた。とりあえずサンプルとして2つのことをしてみた。

  • リストに対して動的にスタイルシートを適用する
  • 「morning」「hello」「evening」がリスト表示されていて、それぞれをクリックするとクリックした文字を表示する
<html>
<head>
<style type="text/css">
.demostyle {
  list-style-type: none;
  width: 100px;
  border: 1px solid red;
  background-color: pink;
  margin: 2px;
  padding: 3px;
}
</style>
<script type="text/javascript" src="build/yui/yui.js"></script> 
<script type="text/javascript" src="build/oop/oop.js"></script> 
<script type="text/javascript" src="build/event/event.js"></script> 
<script type="text/javascript" src="build/dom/dom.js"></script> 
<script type="text/javascript" src="build/node/node.js"></script> 
</head>
<body>
<ul id="demo">
  <li>morning</li>
  <li>hello</li>
  <li>evening</li>
</ul>

<script type="text/javascript">
YUI().use('*', function(Y) { 
    Y.get('#demo').get('children').addClass('demostyle');
    Y.all('#demo li').on('click', function(e){ alert(e.currentTarget.get('innerHTML')); }); 
}); 
</script>

</body>
</html>

気づいた点としてはjQueryに似てメソッドチェーンが出来るようになっているところ。多分2.xはできなかったはず。あとオブジェクト名が短くなっている！YAHOO.lang.JSONはY.JSON、YAHOO.util.CookieはY.Cookieってな具合に。メソッド名も短くなったかな。