jQuery vs AngularJS, dochi?

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