Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery vs AngularJS, dochi?

jQuery vs AngularJS, dochi?

大澤木小鐵

December 05, 2013
Tweet

More Decks by 大澤木小鐵

Other Decks in Programming

Transcript

  1. dochi?
    jQuery AngularJS
    vs

    View full-size slide

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

    View full-size slide

  3. 該學

    jQuery 還是 AngularJS ?

    View full-size slide

  4. 選⼿手介紹

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    上下滑特效。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 等等, CSS3 ?

    View full-size slide

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

    View full-size slide

  17. 說好的 IE 7 呢?

    View full-size slide

  18. jQuery AngularJS

    IE ⽀支援度

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    (Two Way Data-Binding) 。

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  24. 程式碼
    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 full-size slide

  25. 程式碼
    (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 full-size slide

  26. val
    $span
    $text
    程式碼⾏行數: 9

    View full-size slide

  27. val
    $span
    $text $slider
    程式碼⾏行數: 16

    View full-size slide

  28. val
    $span
    $text
    new
    element
    $slider
    程式碼⾏行數: 25

    View full-size slide

  29. val
    $span
    $text
    new
    element
    $slider
    new
    element
    程式碼⾏行數: 36

    View full-size slide

  30. val
    $span
    $text
    new
    element
    $slider
    new
    element
    new
    element
    程式碼⾏行數: 49

    View full-size slide

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

    View full-size slide

  32. jQuery AngularJS

    元件互動便利性

    View full-size slide

  33. 時間來不及

    快點做結論

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide