Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
jQuery vs AngularJS, dochi?
大澤木小鐵
December 05, 2013
Programming
20
2.7k
jQuery vs AngularJS, dochi?
大澤木小鐵
December 05, 2013
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
510
JSConf Asia 2014 Sessions
jaceju
4
330
What happens in Laravel 4 bootstraping
jaceju
9
520
Deal with Laravel assets by Bower & Gulp
jaceju
30
1.8k
Leaning MVC By Example
jaceju
0
300
ng-conf_2014
jaceju
2
870
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
340
Begining Composer
jaceju
24
4.5k
Checkup your web pages
jaceju
44
3.1k
Other Decks in Programming
See All in Programming
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
170
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
300
Where and how to run UI tests (Droidcon London, 2021)
nonews
0
210
LOWYAの信頼性向上とNew Relic
kazumax55
4
340
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
dbtとBigQueryで始めるData Vault入門
kazk1018
0
180
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
970
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
The future of trust stores in Python
sethmlarson
0
180
Kotlin KSP - Intro
taehwandev
1
470
Get Ready for Jakarta EE 10
ivargrimstad
0
2.2k
読みやすいコードを書こう
yutorin
0
390
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Embracing the Ebb and Flow
colly
73
3.3k
Code Reviewing Like a Champion
maltzj
506
37k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
How STYLIGHT went responsive
nonsquared
85
3.9k
How GitHub (no longer) Works
holman
296
140k
Designing the Hi-DPI Web
ddemaree
272
32k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Transcript
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