jQuery vs AngularJS, dochi?

dochi? jQuery AngularJS vs

@jaceju ⼤大澤⽊木⼩小鐵

該學  jQuery 還是 AngularJS ？

選⼿手介紹

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

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

Round 1

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

<!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

jQuery

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

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

var $menu = $('#menu');! var $button = $('.button'); <ul id="menu">
... </ul>! <p class="button"> ... </p> 改⽤用 id / class

AngularJS

程式運作⽅方式 1. 利⽤用變數 isClosed 來記住  ⺫⽬目前選單呈現狀態。 2. 透過 ng-click 來綁定
p 標籤的事件，  以決定 isClosed 的值。 3. 透過 ng-class 與 isClosed   來決定要不要顯⽰示選單。

程式碼 <!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

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

等等， CSS3 ？

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

說好的 IE 7 呢？

jQuery AngularJS 勝 IE ⽀支援度

Round 2

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

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

AngularJS

程式運作⽅方式 1. 利⽤用變數 val 來記住⺫⽬目前的數值。 2. 透過 ng-bind 將 val
變數綁定⾄至  span 標籤顯⽰示。 3. 透過 ng-model 將 val 變數與  input / span 標籤做雙向資料綁定   (Two Way Data-Binding) 。

程式碼 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>!

jQuery

程式運作⽅方式 1. 利⽤用變數 val 來記住⺫⽬目前的數值。 2. 當操作 slider 元件時，透過 input
事件  來更新其他元件的內容或值。 3. 當操作 text 元件時，透過 keyup 事件  來更新其他元件的內容或值。

程式碼 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 內容! ! });! ! ! ! ! ! ! })();

程式碼 (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

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

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

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

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

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

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

jQuery AngularJS 勝元件互動便利性

時間來不及  快點做結論

jQuery AngularJS 主要開發⽅方式盡可能不修改 HTML  將⾴頁⾯面邏輯寫在 JS 中 HTML 為主，
JS 為輔適⽤用場合畫⾯面特效互動表單元素特效透過 JavaScript 計算 CSS3  (或 jQuery-like API 輔助) 擴充機制 plugins directives IE ⽀支援度 IE6 以上 (1.x) IE8 以上

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

jQuery vs AngularJS, dochi?

jQuery vs AngularJS, dochi?

More Decks by 大澤木小鐵

Other Decks in Programming

Featured

Transcript