Handbook - From jQuery to YUI 3

Handbook -

From jQuery to YUI
clayliao@
April, 2012

About

 Ying-Hsiang, Liao
 @clayliao
 Y! Search F2E
 blog

2

0. YUI 很 Nice 的，這其中一定有什麼誤會

GETTING STARTED

3

動態加載 : YUI().use('*', fn)

jQuery 1.7.2 YUI 3.5
$.foo.bar(); YUI().use('node',
function (Y) {
Y.foo.bar();
});

//Simple YUI
Y.foo.bar()

4

金手指 : YUI 3 動態加載
 需要時自動判斷並載入相依檔案
 節省頻寬並加速
 開發者不需要自行維護

5

1. 使用熟悉的 CSS 語法找到目標元素

CSS SELECTORS

6

$('#id') Y.one('#id')
$('.class') Y.all('.class')
$('div.class') Y.all('div.class')
$('parent child') Y.all('parent child')

$('parent > child') Y.all('parent > child')

7

金手指 : API 設計概念
 Y.one()
( 隱含目標只有一個，回傳值為 Node 物件

 Y.all()
隱含目標至少有一個以上，回傳值為
NodeList 物件

8

$(':text') Y.all('input[type=text]')
$(':submit') Y.all('input[type=submit]
$(':radio') ')
$(':last-child') Y.all('input[type=radio]'
… )
Y.all(':last-child')
…

9

$('div:even') Y.all('div').even()
$('div:odd') Y.all('div').odd()

$(':empty') Y.all(':empty')

10

2. 隨心所欲地操作目標元素

DOM HANDLING

11

var foo = $ var foo =
('div.foo:first'); Y.one('div.foo');

foo.method(); if (foo) {
foo.method();
}

12

var foo = $ var foo =
('div.foo'); Y.all('div.foo');

if (foo.length) { if (foo.size()) {
//do something //do something
} }

13


.find('p.foo:first') .one('p.foo')
.find('p.foo') .all('p.foo')

14

$('<div/>') Y.Node.create('<div/>')

15

.html('foo') .setContent('foo')
.text('foo') .set('text', 'foo')
.val('foo') .set('value', 'foo')

16

.html() .get('innerHTML')
.text() .get('text')
.val() .get('value')

17


無參數表示 get Getter/setter 設計
html()
.get('text')
有參數表示 set .set('text', 'foo')
html('foo')

18

.attr('foo') .getAttribute('foo')
.attr('foo', 'bar') .setAttribute('foo',
'bar')

19

.siblings() .siblings()
.siblings(selector) .siblings(selector)
.siblings(fn)

20

.next() .next()
.next(selector) .next(selector)
.next(fn)

21

.prev() .previous()
.prev(selector) .previous(selector)
.previous(fn)

22

.parent() .get('parentNode')
.children() .get('children')
.closest(selector) .ancestor(selector)
.ancestor(fn)
$.contains(node, .contains(descendant)
descendant)

23

parent.append('<div/>') parent.append('<div/>')

child.appendTo(parent) child.appendTo(parent)

24

.show() .show()
.hide() .hide()

25

3. 找到目標元素後，改變長相

CSS

26

CSS class name manipulation

.addClass('foo') .addClass('foo')
.removeClass('foo') .removeClass('foo')
.toggleClass('foo') .toggleClass('foo')
.hasClass('foo') .hasClass('foo')

27

Replace node's CSS class 'foo' with 'bar'


.removeClass('foo'). .replaceClass('foo',
addClass('bar') 'bar')

28

Set single/multiple CSS property

.css('display', .setStyle('display',
'block') 'block')

.css({ .setStyles({
height: 100, height: 100,
width: 100, width: 100,
display: 'block' display: 'block'
}) })
29

Get the current value for a CSS property

.css('display') .getStyle('display')

30

Height / width. Excludes padding and
borders

.height() .getComputedStyle('height')
.width() .getComputedStyle('width')

31

Height / width. Includes padding but not
border

.innerHeight() .get('clientHeight')
.innerWidth() .get('clientWidth')

32

Height / width. Includes padding and
border

.outerHeight() .get('offsetHeight')
.outerWidth() .get('offsetWidth')

33

Get/Set x,y coordinates relative to the
document

.offset() .getXY()
// {left: 123, top: // [123, 456]
456, width: 789,
height: 1011}

.offset({ left: 123, .setXY(123, 456)
top: 456 })

34

4. 觸發事件與使用者互動

EVENT

35

.click(fn) .on('click', fn)
.focus(fn) .on('focus', fn)
.blur(fn) .on('blur', fn)
.mouseout(fn) .on('mouseout', fn)
.mouseover(fn) .on('mouseover', fn)

36


承襲原生 JavaScript 語法
JS: .onClick(fn)
YUI: .on('click', fn)

37

$ Y.one("#foo").simulate("c
('#foo').trigger('clic lick")
k');

38

5. 常用功能之操作陣列與 NodeList 物件

ARRAY VS. NODELIST

39

$ Y.all('.foo').array_metho
('.foo').array_method d(args)
(args)

40

$('.foo').each( Y.all('.foo').each(
function() { function() {
this.method(); this.method();
} }
); );

41

6. 好 Ajax ，不用嗎 ?

AJAX

42

$.ajax({ Y.io(url,{
url: url, data: data,
data: data, on: {success:
success: successFn successFn
}); }
});

43

$('#msg').load('/ajax/ Y.one('#msg').load('/ajax
test.html'); /test.html');

//No match api Y.one('#msg').load('/ajax
/test.html', '#foo');

動態取得資料後，
取代指定區塊
44

$.parseJSON( Y.JSON.parse( '{"name":"Y
'{"name":“jQuery"} UI3"}
) )

45

7. 藍波丸 : 原生 JavaScript 強化 !

LANGUAGE UTILITIES

46

$.trim('foo'); Y.Lang.trim('foo');

47

Iterate through an array/object

$.each([1, 2, 3], Y.Array.each([1, 2, 3],
fn(index, value)) fn(value, index))
$.each({ key: Y.Object.each({ key:
value }, fn(key, value }, fn(key,
value)) value))

48

$.inArray(value, Y.Array.indexOf(value,
array) array)

49

$.isPlainObject(obj) Y.Lang.isObject(obj)
Y.Lang.isObject(obj,
true)

$.isEmptyObject(obj) Y.Object.isEmpty(obj)

50

YUI ~= jQuery + jQuery UI

ONE MORE THING

52

<body class="yui3-skin-sam">

53

<body class="yui3-skin-night">
54

Handbook - From jQuery to YUI 3

More Related Content

What's hot

Viewers also liked

Handbook - From jQuery to YUI 3