YUI 3.0.0 GA Release 學習筆記

YUI 3.0.0 GA Release 囉~ 看看有什麼改變, 順便做做教學、學習筆記.

• 詳見: YUI 3.0.0: First GA Release of YUI’s Next-Generation Codeline

YUI 3.0 的語法簡單不少, 而且加了 Sanbox - use() 的功能, 看起來方便許多.

範例1 - DOM


YUI().use("node", function(Y) {
    Y.one("#message").setContent("Hello, World!");
});


範例2 - use()


<div id="demo">I'm draggable.</div>

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('dd-plugin', function(Y) {
    Y.one('#demo').plug(Y.Plugin.Drag);
});
</script>

不過跟 YUI 2 差異也不小, 可由此對照表來做轉換 - YUI2 與 YUI3 轉換比較表

學習步驟

學習文件很完整, 照下述的方式開始看, 或許能較快入手. 🙂

1. YUI 3: YUI Global Object
2. YUI 3: Node
3. YUI 3: Event
4. 上述在看時, 可搭配 YUI 3: Index of Library Examples 此頁的範例看.
5. 看 Utilities 有哪些 Module 可以用
6. API: (YUI Library)

相關筆記

Core


Y.Node.get('#demo');


DOM Node


// DOM Node, Y.one(), Y.all()
// use('node'), use('*')
YUI().use('node', function(Y) {
    Y.all('#demo li').addClass('bar');
    Y.one('#demo').get('children').addClass('bar');

    var node  = Y.one('#demo');
    var node2 = node.one('p');

    var node = Y.one('#toolbar').set('role', 'toolbar');
    Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });

    var node = Y.one('#foo');
    var parent = node.get('parentNode');
    var html = 'I am "' + node.get('id') + '".';
    node.set('innerHTML', html);
});

Event


// Event
Y.one('#demo').on('click', function(e) {
    e.preventDefault();
    alert('event: ' + e.type + ' target: ' + e.target.get('tagName')); 
});


全部寫完後, 若要把用到的 Library 載入, 全部合併成一隻 JavaScript 的話, 可以用: The YUI Configurator.

自己寫的 JavaScript 要壓縮可用: YUI Compressor.

YUI 3 新增的 Module 中, 我特別喜歡下述~

• YUI 3: Cache
• YUI 3: Cookie
• The YUI Global Object: Browser Detection with UA - 偵測瀏覽器版本

相關網頁

• YUI Library :: Home
• YUI3 元件架構