Handbook - From jQuery to YUI 3

7,952 views

Published on

Published in: Technology, Education
3 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
7,952
On SlideShare
0
From Embeds
0
Number of Embeds
4,666
Actions
Shares
0
Downloads
1
Comments
3
Likes
16
Embeds 0
No embeds

No notes for slide

Handbook - From jQuery to YUI 3

  1. 1. Handbook -From jQuery to YUI clayliao@ April, 2012
  2. 2. About  Ying-Hsiang, Liao  @clayliao  Y! Search F2E  blog 2
  3. 3. 0. YUI 很 Nice 的,這其中一定有什麼誤會GETTING STARTED 3
  4. 4. 動態加載 : 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
  5. 5. 金手指 : YUI 3 動態加載 需要時自動判斷並載入相依檔案 節省頻寬並加速 開發者不需要自行維護 5
  6. 6. 1. 使用熟悉的 CSS 語法找到目標元素CSS SELECTORS 6
  7. 7. jQuery 1.7.2 YUI 3.5$(#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
  8. 8. 金手指 : API 設計概念 Y.one() ( 隱含目標只有一個,回傳值為 Node 物件 Y.all() 隱含目標至少有一個以上,回傳值為 NodeList 物件 8
  9. 9. jQuery 1.7.2 YUI 3.5$(: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
  10. 10. jQuery 1.7.2 YUI 3.5$(div:even) Y.all(div).even()$(div:odd) Y.all(div).odd()$(:empty) Y.all(:empty) 10
  11. 11. 2. 隨心所欲地操作目標元素DOM HANDLING 11
  12. 12. jQuery 1.7.2 YUI 3.5var foo = $ var foo =(div.foo:first); Y.one(div.foo);foo.method(); if (foo) { foo.method(); } 12
  13. 13. jQuery 1.7.2 YUI 3.5var foo = $ var foo =(div.foo); Y.all(div.foo);if (foo.length) { if (foo.size()) { //do something //do something} } 13
  14. 14. jQuery 1.7.2 YUI 3.5.find(p.foo:first) .one(p.foo).find(p.foo) .all(p.foo) 14
  15. 15. jQuery 1.7.2 YUI 3.5$(<div/>) Y.Node.create(<div/>) 15
  16. 16. jQuery 1.7.2 YUI 3.5.html(foo) .setContent(foo).text(foo) .set(text, foo).val(foo) .set(value, foo) 16
  17. 17. jQuery 1.7.2 YUI 3.5.html() .get(innerHTML).text() .get(text).val() .get(value) 17
  18. 18. 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5無參數表示 get Getter/setter 設計html() .get(text)有參數表示 set .set(text, foo)html(foo) 18
  19. 19. jQuery 1.7.2 YUI 3.5.attr(foo) .getAttribute(foo).attr(foo, bar) .setAttribute(foo, bar) 19
  20. 20. jQuery 1.7.2 YUI 3.5.siblings() .siblings().siblings(selector) .siblings(selector) .siblings(fn) 20
  21. 21. jQuery 1.7.2 YUI 3.5.next() .next().next(selector) .next(selector) .next(fn) 21
  22. 22. jQuery 1.7.2 YUI 3.5.prev() .previous().prev(selector) .previous(selector) .previous(fn) 22
  23. 23. jQuery 1.7.2 YUI 3.5.parent() .get(parentNode).children() .get(children).closest(selector) .ancestor(selector) .ancestor(fn)$.contains(node, .contains(descendant) descendant) 23
  24. 24. jQuery 1.7.2 YUI 3.5parent.append(<div/>) parent.append(<div/>)child.appendTo(parent) child.appendTo(parent) 24
  25. 25. jQuery 1.7.2 YUI 3.5.show() .show().hide() .hide() 25
  26. 26. 3. 找到目標元素後,改變長相CSS 26
  27. 27. CSS class name manipulation jQuery 1.7.2 YUI 3.5 .addClass(foo) .addClass(foo) .removeClass(foo) .removeClass(foo) .toggleClass(foo) .toggleClass(foo) .hasClass(foo) .hasClass(foo) 27
  28. 28. Replace nodes CSS class foo with bar jQuery 1.7.2 YUI 3.5 .removeClass(foo). .replaceClass(foo, addClass(bar) bar) 28
  29. 29. Set single/multiple CSS property jQuery 1.7.2 YUI 3.5 .css(display, .setStyle(display, block) block) .css({ .setStyles({ height: 100, height: 100, width: 100, width: 100, display: block display: block }) }) 29
  30. 30. Get the current value for a CSS property jQuery 1.7.2 YUI 3.5 .css(display) .getStyle(display) 30
  31. 31. Height / width. Excludes padding andborders jQuery 1.7.2 YUI 3.5 .height() .getComputedStyle(height) .width() .getComputedStyle(width) 31
  32. 32. Height / width. Includes padding but notborder jQuery 1.7.2 YUI 3.5 .innerHeight() .get(clientHeight) .innerWidth() .get(clientWidth) 32
  33. 33. Height / width. Includes padding andborder jQuery 1.7.2 YUI 3.5 .outerHeight() .get(offsetHeight) .outerWidth() .get(offsetWidth) 33
  34. 34. Get/Set x,y coordinates relative to thedocument jQuery 1.7.2 YUI 3.5 .offset() .getXY() // {left: 123, top: // [123, 456] 456, width: 789, height: 1011} .offset({ left: 123, .setXY(123, 456) top: 456 }) 34
  35. 35. 4. 觸發事件與使用者互動EVENT 35
  36. 36. jQuery 1.7.2 YUI 3.5.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
  37. 37. 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5 承襲原生 JavaScript 語法 JS: .onClick(fn) YUI: .on(click, fn) 37
  38. 38. jQuery 1.7.2 YUI 3.5$ Y.one("#foo").simulate("c (#foo).trigger(clic lick") k); 38
  39. 39. 5. 常用功能之操作陣列與 NodeList 物件ARRAY VS. NODELIST 39
  40. 40. jQuery 1.7.2 YUI 3.5$ Y.all(.foo).array_metho (.foo).array_method d(args) (args) 40
  41. 41. jQuery 1.7.2 YUI 3.5$(.foo).each( Y.all(.foo).each( function() { function() { this.method(); this.method(); } }); ); 41
  42. 42. 6. 好 Ajax ,不用嗎 ?AJAX 42
  43. 43. jQuery 1.7.2 YUI 3.5$.ajax({ Y.io(url,{ url: url, data: data, data: data, on: {success: success: successFn successFn}); } }); 43
  44. 44. jQuery 1.7.2 YUI 3.5$(#msg).load(/ajax/ Y.one(#msg).load(/ajax test.html); /test.html);//No match api Y.one(#msg).load(/ajax /test.html, #foo); 動態取得資料後, 取代指定區塊 44
  45. 45. jQuery 1.7.2 YUI 3.5$.parseJSON( Y.JSON.parse( {"name":"Y {"name":“jQuery"} UI3"}) ) 45
  46. 46. 7. 藍波丸 : 原生 JavaScript 強化 !LANGUAGE UTILITIES 46
  47. 47. jQuery 1.7.2 YUI 3.5$.trim(foo); Y.Lang.trim(foo); 47
  48. 48. Iterate through an array/object jQuery 1.7.2 YUI 3.5 $.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
  49. 49. jQuery 1.7.2 YUI 3.5$.inArray(value, Y.Array.indexOf(value,array) array) 49
  50. 50. jQuery 1.7.2 YUI 3.5$.isPlainObject(obj) Y.Lang.isObject(obj) Y.Lang.isObject(obj, true)$.isEmptyObject(obj) Y.Object.isEmpty(obj) 50
  51. 51. 51
  52. 52. YUI ~= jQuery + jQuery UIONE MORE THING 52
  53. 53. <body class="yui3-skin-sam"> 53
  54. 54. <body class="yui3-skin-night"> 54
  55. 55. Thank you

×