Upload
social-tables
View
558
Download
1
Embed Size (px)
Citation preview
JQUERYISNOTTHEANSWER
EdKim@edwardjkim
JQUERYISEVERYWHERE(ALMOST)
56%ofallwebsites
92%ofjavascriptwebsites
Source:W3Tech
ACOMMONPITFALL
Iwanttoshow/hidecontentwhenauserclicksonalink"Nicethatwasprettyeasy!"
Iwanttoshowdatadependingonwhattheuserinputs"Nottoobad"
NowIwanttoletusersmanipulatethedata"ThisisgettingharderbutI'llkeepgoingbecauseI'mreallygoodatjQuery."
DATA-VIEW-LOGIC
GETTINGDATAOUTOFTHEDOM
Ashumans,it'seasytoprocessdatainthisform
Butformachines,itactuallytakesalotofworktoextractthedataandstartcomputing
ASIMPLEEXAMPLE
Sortthistablebythepriceofbeer
THEHTML
WegetHTMLforeachtablerowfromtheserver.Eachtablerowhastheclass"bar".
<tableid="bar-table">...stuff...<tbody><trclass="bar"><tdclass="name">McGinty'sPublicHouse</td><tdclass="price">$4.00</td><tdclass="address">911EllsworthDrive</td></tr>...morerowswithclass"bar"...
SORTINGAIN'TEASY
sortByPrice=function(a,b){return$(a).children('.price').html()>$(b).children('.price').html()?1:-1;}
Nowyouhavetofindtheparent<tbody>elementandrearrangetherows.
varbars=$(‘.bar’)//barsisnowanarrayof<tr>elements
bars.sort(sortByPrice);//barsisnowasortedarrayof<tr>elements
MANIPULATINGTHEDOM
$.each(bars,function(index,bar){$('#bar-table').children('tbody').append(bar);});//VeryBad!!!
THEWHOLESOLUTION
Source:StackOverflow
$(document).ready(function(){$('table.sortable').each(function(){var$table=$(this);$('th',$table).each(function(column){var$header=$(this);$header.click(function(){varrows=$table.find('tbody>tr').get();rows.sort(function(a,b){varkeyA=$(a).children('td').eq(column).text().toUpperCase();varkeyB=$(b).children('td').eq(column).text().toUpperCase();if(keyA<keyB)return-1;if(keyA>keyB)return1;return0;});$.each(rows,function(index,row){$table.children('tbody').append(row);});});});});})
AGROWINGRIFTBETWEENVIEWANDLOGICHTMLJavascript
Notatallobvioushowtheseareconnected
<trclass="bar"><tdclass="name">TGIFriday's</td><tdclass="price">$4.00</td><tdclass="address">911EllsworthDrive</td></tr>...morerows...
bars=$('.bar');bars.sort(sortByPrice);
$.each(bars,function(index,bar){$('tbody').append(bar);});
WHATABOUTCOMPLEXVIEWS?Barswithin2milesoftheCivicCenter
JQUERYISNOTAFRAMEWORK
MV*TOTHERESCUE
Data-View-Logic
Model-View-Controller(MVC)Model-View-ViewModel(MVVM)
TABLESORTINGINKNOCKOUT<table>...stuff...<tbodydata-bind="foreach:bars"><trclass="bar"><tddata-bind="text:name"/><tddata-bind="text:price"/><tddata-bind="text:address"/></tr>
functionsortByPrice(a,b){returna.price>b.price?1:-1;}barData=[{name:"PiratzTavern",price:"3.50",...}];sortedBarData=barData.sort(sortByPrice);viewModel.sortedBars=ko.observableArray(sortedBarData);
WHENPERFORMANCEMATTERS
REMEMBERTHIS?
$.each(rows,function(index,row){$table.children('tbody').append(row);});
HeavyDOMtraversaleatsuptime.
Let'scompareperformancetoaframeworklikeknockout.js
TIMETRIALS
FILESIZE
jQuery2.0.3-30kbgzipped
Zepto.js-10kbgzippedknockout.js-16kbgzippedbackbone.js-7kbgzipped
JQUERYDOESHAVEGOODPARTS
BrowsercompatibilityAjaxHandlingEvents
SOMEGOODUSECASES
SmallSelf-containedwidgets(jQueryUI)ScrapingWebsitesRapidPrototyping(arguably)
INSUMMARY
jQueryisnotaframeworkjQuerycanbeslow
It'sagreattool.Justbecarefulhowyouuseit!