10/18 SA@Taipei 主講 Open at Yahoo!

10/18 SA@Taipei 主講 Open at Yahoo!
Instance-based：可例項化
YUI 2.x: YAHOO 作為全域變數，只能有一個，容易被覆寫

YAHOO.widget.HelloWorld = doSomething; // 開發者 1 寫的
...
YAHOO.widget.HelloWorld = doNothing; // 開發者 2 寫的

YUI 3.x: YUI() 可建立起一個全新的例項，不會被覆寫

YUI().use('node', function(Y) { // 開發者 1 寫的
    Y.HelloWorld = doSomething;
};);
YUI.use('drag', function(Y) { // 開發者 2 寫的
    Y.HelloWorld = doNothing;
};);

YUI 3.x: 取得的物件不再是 HTMLElement

var el = Y.get('#foo');
alert(el.nodeName); //output: undefined
alert(el.get('nodeName')); //output: DIVs

YUI 2.xFunction-based 的存取方式

var $D = YAHOO.util.Dom; // reference cache
var el = $D.get('foo');
YUD.addClass(el, 'highlighted');
el.innerHTML += ' clicked';

YUI 3.x: Object-based 的存取方式

var el = Y.get('#foo');
el.addClass('highlighted');
el.set('innerHTML') = el.get('innerHTML') + ' clicked';

YUI 3: event listener
事件的綁法
方法一：Y.on()

YUI().use('node', function (Y) {
    Y.on('click', function (e) {
        // 處理事件
    }, '#foo');
});

方法二：Node.on()

YUI().use('node', function (Y) {
    var el = Y.get('#foo');
    el.on( click', function (e) {
        // 處理事件
    });
});

YUI 2.x: 還是一般 DOM Event

var $E = YAHOO.util.Event; // reference cache
$E.on('foo', 'click', function (e) {
    alert(e.type); //output: click
    $E.preventDefault(e); //防止像是連結或表單送出的預設事件
    $E.stopPropogation(e); //防止Bubbleup
});

YUI 3.x: 封裝後更物件導向

Y.on('click', function (e) {
    alert(e.type); //output: undefinded
    e.preventDefault();
    e.stopPropogation();
}, '#foo');