jQuery vs AngularJS, dochi?

Transcript

1. dochi?
   jQuery AngularJS
   vs
   

   View Slide

2. @jaceju
   ⼤大澤⽊木⼩小鐵
   

   View Slide

3. 該學

   jQuery 還是 AngularJS ？
   

   View Slide

4. 選⼿手介紹
   

   View Slide

5. ⽤用 CSS 選擇器語法來選擇想要的元素!
   然後對這些元素進⾏行操作或綁定事件處理程式
   jQuery
   !
   !
   !<br/>$('.post').on('click', function () {!<br/>...!<br/>});!<br/>
   

   View Slide

6. 將 HTML 當成程式平台⽽而⾮非單純的⽂文件，!
   將狀態和事件直接⽤用⾃自訂的 HTML 標籤或屬性來表達。
   AngularJS
   

   
   

   View Slide

7. Round 1
   

   View Slide

8. http://goo.gl/CAja7s
   範例畫⾯面
   客⼾戶說：⼀一定要給我⽀支援 IE 7 以上的版本
   

   View Slide

9. !
   !
   !
   !
   !
   Home!
   Profile!
   Messages!
   Settings!
   !
   !
   Click Me!
   !
   !
   !
   HTML 結構
   http://goo.gl/CAja7s
   

   View Slide

10. jQuery
    

    View Slide

11. 程式運作⽅方式
    1. 在 p 標籤上綁定⼀一個按下事件處理程式。
    2. 當 p 標籤被按下時，切換選單元件的

    上下滑特效。
    

    View Slide

12. 程式碼
    $(function () {!
    var $menu = $('body > ul'); // 找到選單!
    var $button = $('body > p'); // 找到按鈕!
    !
    $button.on('click', function () {!
    $menu.slideToggle(); // 切換上下滑效果!
    });!
    });!
    http://goo.gl/N4nLtS
    

    View Slide

13. var $menu = $('#menu');!
    var $button = $('.button');
    ... !
    ...
    改⽤用 id / class
    

    View Slide

14. AngularJS
    

    View Slide

15. 程式運作⽅方式
    1. 利⽤用變數 isClosed 來記住

    ⺫⽬目前選單呈現狀態。
    2. 透過 ng-click 來綁定 p 標籤的事件，

    以決定 isClosed 的值。
    3. 透過 ng-class 與 isClosed 

    來決定要不要顯⽰示選單。
    

    View Slide

16. 程式碼
    !
    !
    !
    !
    !
    Home!
    Profile!
    Messages!
    Settings!
    !
    !
    Click Me!
    !
    !
    !
    !
    http://goo.gl/Fjo52H
    

    View Slide

17. CSS3 transition
    ul {

    ...!
    overflow-y: hidden;!
    max-height: 500px;!
    transition-property: all;!
    transition-duration: 1s;!
    }!
    ul.closed {!
    max-height: 0;!
    }!
    http://goo.gl/Fjo52H
    

    View Slide

18. 等等， CSS3 ？
    

    View Slide

19. Can I use transition?
    http://goo.gl/FUAyDT
    

    View Slide

20. 說好的 IE 7 呢？
    

    View Slide

21. jQuery AngularJS
    勝
    IE ⽀支援度
    

    View Slide

22. Round 2
    

    View Slide

23. http://goo.gl/wUhIim
    範例畫⾯面
    

    View Slide

24. HTML 結構
    !
    !
    !
    !
    Current Value: 1!
    !
    min="1" max="10" />!
    !
    !
    !
    !
    http://goo.gl/wUhIim
    

    View Slide

25. AngularJS
    

    View Slide

26. 程式運作⽅方式
    1. 利⽤用變數 val 來記住⺫⽬目前的數值。
    2. 透過 ng-bind 將 val 變數綁定⾄至

    span 標籤顯⽰示。
    3. 透過 ng-model 將 val 變數與

    input / span 標籤做雙向資料綁定 

    (Two Way Data-Binding) 。
    

    View Slide

27. 程式碼
    http://goo.gl/Tbx6UD
    !
    !
    !
    !
    Current Value: 1!
    ng-model="val" />!
    !
    !
    !
    !
    !
    

    View Slide

28. jQuery
    

    View Slide

29. 程式運作⽅方式
    1. 利⽤用變數 val 來記住⺫⽬目前的數值。
    2. 當操作 slider 元件時，透過 input 事件

    來更新其他元件的內容或值。
    3. 當操作 text 元件時，透過 keyup 事件

    來更新其他元件的內容或值。
    

    View Slide

30. 程式碼
    http://goo.gl/nhwtyN
    (function () {!
    var val = 1;!
    var $span = $('span').text(val);!
    var $slider = $('input[type=range]').val(val);!
    !
    !
    $slider.on('input', function () {!
    val = $(this).val(); // 更新 val 數值!
    $span.text(val); // 同步 $span 內容!
    !
    });!
    !
    !
    !
    !
    !
    !
    })();
    

    View Slide

31. 程式碼
    (function () {!
    var val = 1;!
    var $span = $('span').text(val);!
    var $slider = $('input[type=range]').val(val);!
    var $text = $('input[type=text]').val(val);!
    !
    $slider.on('input', function () {!
    val = $(this).val(); // 更新 val 數值!
    $span.text(val); // 同步 $span 內容!
    $text.val(val); // 同步 $text 值!
    });!
    !
    $text.on('keyup', function () {!
    val = $(this).val(); // 更新 val 數值!
    $span.text(val); // 同步 $span 內容!
    $slider.val(val); // 同步 $slider 值!
    });!
    })();
    http://goo.gl/nhwtyN
    

    View Slide

32. val
    $span
    $text
    程式碼⾏行數： 9
    

    View Slide

33. val
    $span
    $text $slider
    程式碼⾏行數： 16
    

    View Slide

34. val
    $span
    $text
    new
    element
    $slider
    程式碼⾏行數： 25
    

    View Slide

35. val
    $span
    $text
    new
    element
    $slider
    new
    element
    程式碼⾏行數： 36
    

    View Slide

36. val
    $span
    $text
    new
    element
    $slider
    new
    element
    new
    element
    程式碼⾏行數： 49
    

    View Slide

37. val
    $span
    $text
    new
    element
    $slider
    new
    element
    new
    element
    程式碼⾏行數!
    ⼤大爆炸！！
    

    View Slide

38. jQuery AngularJS
    勝
    元件互動便利性
    

    View Slide

39. 時間來不及

    快點做結論
    

    View Slide

40. jQuery AngularJS
    主要開發⽅方式
    盡可能不修改 HTML

    將⾴頁⾯面邏輯寫在 JS 中
    HTML 為主， JS 為輔
    適⽤用場合 畫⾯面特效 互動表單
    元素特效 透過 JavaScript 計算
    CSS3

    (或 jQuery-like API 輔助)
    擴充機制 plugins directives
    IE ⽀支援度 IE6 以上 (1.x) IE8 以上
    

    View Slide

41. 先學 j
    Query
    然後依專案性質決定使⽤用哪⼀一個
    還是要摻在⼀一起做成撒尿⽜牛丸也可以
    再學
    AngularJS
    

    View Slide