Pro Yearly is on sale from $80 to $50! »

jQuery vs AngularJS, dochi?

jQuery vs AngularJS, dochi?

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

December 05, 2013
Tweet

Transcript

  1. dochi? jQuery AngularJS vs

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

  3. 該學
 jQuery 還是 AngularJS ?

  4. 選⼿手介紹

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

    function () {! ...! });! </script>
  6. 將 HTML 當成程式平台⽽而⾮非單純的⽂文件,! 將狀態和事件直接⽤用⾃自訂的 HTML 標籤或屬性來表達。 AngularJS <button ng-click="post('bob')">
 </button>

  7. Round 1

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

  9. <!DOCTYPE html>! <html>! <body>! ! <ul>! <li><a href="#">Home</a></li>! <li><a href="#">Profile</a></li>!

    <li><a href="#">Messages</a></li>! <li><a href="#">Settings</a></li>! </ul>! ! <p>Click Me</p>! ! </body>! </html>! HTML 結構 http://goo.gl/CAja7s
  10. jQuery

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

  12. 程式碼 $(function () {! var $menu = $('body > ul');

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

    ... </ul>! <p class="button"> ... </p> 改⽤用 id / class
  14. AngularJS

  15. 程式運作⽅方式 1. 利⽤用變數 isClosed 來記住
 ⺫⽬目前選單呈現狀態。 2. 透過 ng-click 來綁定

    p 標籤的事件,
 以決定 isClosed 的值。 3. 透過 ng-class 與 isClosed 
 來決定要不要顯⽰示選單。
  16. 程式碼 <!DOCTYPE html>! <html>! <body ng-app ng-init="isClosed=true">! ! <ul class="closed"

    ng-class="{ closed: isClosed }">! <li><a href="#">Home</a></li>! <li><a href="#">Profile</a></li>! <li><a href="#">Messages</a></li>! <li><a href="#">Settings</a></li>! </ul>! ! <p ng-click="isClosed = !isClosed">Click Me</p>! ! <script src="angular.min.js"></script>! </body>! </html>! http://goo.gl/Fjo52H
  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
  18. 等等, CSS3 ?

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

  20. 說好的 IE 7 呢?

  21. jQuery AngularJS 勝 IE ⽀支援度

  22. Round 2

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

  24. HTML 結構 <!DOCTYPE html>! <html>! <body>! ! <p>Current Value: <span>1</span></p>!

    ! <p><input type="range" value="1" ! min="1" max="10" /></p>! <p><input type="text" value="1" /></p>! ! </body>! </html>! http://goo.gl/wUhIim
  25. AngularJS

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

    變數綁定⾄至
 span 標籤顯⽰示。 3. 透過 ng-model 將 val 變數與
 input / span 標籤做雙向資料綁定 
 (Two Way Data-Binding) 。
  27. 程式碼 http://goo.gl/Tbx6UD <!DOCTYPE html>! <html ng-app>! <body ng-init="val=1">! ! <p>Current

    Value: <span ng-bind="val">1</span></p>! <p><input type="range" min="1" max="10"! ng-model="val" /></p>! <p><input type="text" ng-model="val" /></p>! ! <script src="angular.min.js"></script>! </body>! </html>!
  28. jQuery

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

    事件
 來更新其他元件的內容或值。 3. 當操作 text 元件時,透過 keyup 事件
 來更新其他元件的內容或值。
  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 內容! ! });! ! ! ! ! ! ! })();
  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
  32. val $span $text 程式碼⾏行數: 9

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

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

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

  36. val $span $text new element $slider new element new element

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

    程式碼⾏行數! ⼤大爆炸!!
  38. jQuery AngularJS 勝 元件互動便利性

  39. 時間來不及
 快點做結論

  40. jQuery AngularJS 主要開發⽅方式 盡可能不修改 HTML
 將⾴頁⾯面邏輯寫在 JS 中 HTML 為主,

    JS 為輔 適⽤用場合 畫⾯面特效 互動表單 元素特效 透過 JavaScript 計算 CSS3
 (或 jQuery-like API 輔助) 擴充機制 plugins directives IE ⽀支援度 IE6 以上 (1.x) IE8 以上
  41. 先學 j Query 然後依專案性質決定使⽤用哪⼀一個 還是要摻在⼀一起做成撒尿⽜牛丸也可以 再學 AngularJS