![data() Storage
var myForm = $('#myform')[0];
var formResult = {
errors: validateForm(myForm),
form: myForm
};
myForm.result = formResult;
//later...
var result = $('#myform')[0].result;
if(result.errors.length){
alert('Fix the errors.');
}](https://image.slidesharecdn.com/adv-jquery-111111130001-phpapp02/85/Advanced-jQuery-20-320.jpg)
![map() Utility
bonus utility:
makeArray()
var arr = $.makeArray(arrayLike);
// ==> ['first','second']](https://image.slidesharecdn.com/adv-jquery-111111130001-phpapp02/85/Advanced-jQuery-26-320.jpg)
![Custom Commands
function stripeTable(table, alt) {
$(table)
.find('tr:odd')
.addClass(alt||'alternate');
}
//...
var table = $('#mytable')[0];
stripeTable(table, 'altRow');](https://image.slidesharecdn.com/adv-jquery-111111130001-phpapp02/85/Advanced-jQuery-48-320.jpg)
![Custom
$.expr[':'].myfilter = function(el) {
//return true if el(ement) matches
}
//...
$('div:myfilter').slideDown();](https://image.slidesharecdn.com/adv-jquery-111111130001-phpapp02/85/Advanced-jQuery-52-320.jpg)
![Tidy Callbacks
var task = startLongProcess()
.always(logCompletion)
.fail(logFailure);
$.when(task, otherTask)
.then(function(args1, args2){
useResult(args1[0])
.done(updateScreen);
});](https://image.slidesharecdn.com/adv-jquery-111111130001-phpapp02/85/Advanced-jQuery-59-320.jpg)
Advanced jQuery
- 1.
- 2.
- 3. Sergio •http:// sergiopereira.com/ blog look •@sergiopereira •Chicago ALT.NET •Chicago Code
- 4. The Plan •not justTips & Tricks but, yeah, some of those •overlooked jQuery features •coding the jQuery
- 5. The Plan Is SubjectTo Change
- 6.
- 7.
- 8. end() Command <div class=menu> <ul> <li class=current>New</li> <li>Open...</li> <li>Print...</li> </ul> </div> <div class=menu> ... </div>
- 9. end() Command $('.menu').find('li') <div class=menu> <ul> <li class=current>New</li> <li>Open...</li> <li>Print...</li> </ul> </div> <div class=menu> ... </div>
- 10. end() Command $('.menu').find('li') .filter('.current') <div class=menu> <ul> <li class=current>New</li> <li>Open...</li> <li>Print...</li> </ul> </div> <div class=menu> ... </div>
- 11. end() Command $('.menu').find('li') .filter('.current') .end() <div class=menu> <ul> <li class=current>New</li> <li>Open...</li> <li>Print...</li> </ul> </div> <div class=menu> ... </div>
- 12. end() Command $('.menu').find('li') .filter('.current') .end().end() <div class=menu> <ul> <li class=current>New</li> <li>Open...</li> <li>Print...</li> </ul> </div> <div class=menu> ... </div>
- 13. Computed for when asimple expression isn’t enough
- 14. Computed Values $('#buttons li') .css('margin-left', function(ix, val) { return ix*10; });
- 15. Computed Values • attr(name, function(i,v){ }) • prop(name, function(i,v){ }) • val(function(i,v){ }) • css(name, function(i,v){ })
- 16. Relative CSS incremental
- 17. Relative CSS $('#volumeUp').click(function(){ var $volBar = $('#volBar'); var width = $volBar.css('width'); //easy mistake $volBar.css('width', width + 10); });
- 18. Relative CSS $('#volumeUp').click(function(){ $('#vol').css('margin-left', '+=10'); });
- 19. data() goodbye memory leaks
- 20. data() Storage var myForm= $('#myform')[0]; var formResult = { errors: validateForm(myForm), form: myForm }; myForm.result = formResult; //later... var result = $('#myform')[0].result; if(result.errors.length){ alert('Fix the errors.'); }
- 21. data() Storage var formResult= { errors: validateForm(myForm), form: $('#myform') }; $('#myform').data('result', formResult); //later... var result = $('#myform').data('result'); if(result.errors.length){ alert('Fix the errors.'); }
- 22. data() Storage <ul> <li data-movie-id="131">Crash</li> <li data-movie-id="722">Up</li> </ul> var id = $('li:first').data('movieId'); // ==> id == 131
- 23. data() Storage data attributes •willtry to use correct data type •parses JSON values
- 24. map() Utility projections foryour arrays
- 25. map() Utility array-like: has most of what's needed to be used as an array var arrayLike = { length: 2, 0: 'first', 1: 'second' };
- 26. map() Utility bonus utility: makeArray() var arr = $.makeArray(arrayLike); // ==> ['first','second']
- 27. map() Utility var users= getUsersArray(); var emails = $.map(users, function(user, i){ return user.profile.email; });
- 28. map() Utility var users= getUsersArray(); var emails = $.map(users, function(user, i){ return user.profile.email; });
- 29. map() Utility the callback function •return new value for the position •return null to exclude that position
- 30. re Quick ca • p end(): avoid unnecessary traversals •computed attributes •relative CSS attributes
- 31.
- 32.
- 33. bind(), live(), delegate(), well,yes - choices
- 34. bind() vs. live() $('#container.action') .bind('click', function(){ //do stuff here }); //same as: $('#container .action') // .click(function(){...}); //prefer: $('#container .action') .live('click', function(){ //do stuff here });
- 35. bind() vs. live() •live():more efficient usage •live(): works for added elements •live(): forces you to deal with the
- 36. live() vs. delegate() $('#container.action') .live('click', doStuff); $('#container') .delegate('.action','click', doStuff);
- 37. live() vs. delegate() • live(): syntax is slightly easier • live(): attaches to document • delegate(): attaches closer
- 38. Everything vs. on() $('#close').bind('click',closeWindow); $('#close').on('click', closeWindow); $('.popup').delegate( '.closeBtn','click', closePopup); $('.popup').on( 'click','.closeBtn', closePopup);
- 39. Everything vs. on() $('#close').bind('click',closeWindow); $('#close').on('click', closeWindow); $('.popup').delegate( '.closeBtn','click', closePopup); $('.popup').on( 'click','.closeBtn', closePopup); 1.7
- 40. Custom they remove tight coupling
- 41. Custom Events $('#widget').on('start', function(){ //do stuff }); //elsewhere, maybe in another js file: $('#widget').on('start', function(){ //do other stuff }); //when appropriate: $('#widget').trigger('start');
- 42. Custom Events $('#btn1').on('lock', function(){ $(this).prop('disabled', true); }); //elsewhere, maybe in another js file: $('#toolbar').on('lock', function(){ $(this).find('.icon').remove(); }); //when appropriate: $.event.trigger('lock');
- 43. proxy() let's put thisin context
- 44. proxy() Utility var f= $.proxy(obj, 'doSomething'); var f = $.proxy(obj.doSomething, obj);
- 45. re Event ca • p pick the right binding command •delegate() over live() •on() unifies it all •decouple with
- 46. Extensio ns
- 47. Custom the abc ofjQuery mastery
- 48. Custom Commands functionstripeTable(table, alt) { $(table) .find('tr:odd') .addClass(alt||'alternate'); } //... var table = $('#mytable')[0]; stripeTable(table, 'altRow');
- 49. Custom Commands jQuery.fn.stripe= function(alt) { this .children(':odd') .addClass(alt||'alternate'); return this; }; //... $('#mytable').stripe('altRow');
- 50. Custom Commands jQuery.fn.stripe= function(alt) { this .children(':odd') .addClass(alt||'alternate'); return this; }; //... $('#mytable').stripe('altRow');
- 51. Custom expressive means readable
- 52. Custom $.expr[':'].myfilter = function(el){ //return true if el(ement) matches } //... $('div:myfilter').slideDown();
- 53. re Extensions ca p •commands •expressions •events
- 54.
- 55. Futures, decouple the task from what you do with its outcome
- 56. Tidy Callbacks startLongProcess( function(result){ useResult(result); logCompletion(result); }, function(error){ logCompletion(result); logFailure(error); } );
- 57. Tidy Callbacks startLongProcess( function(result){ useResult(result, function(res2){ updateScreen(res2); }); logCompletion(result); }, //... );
- 58. Tidy Callbacks var task= startLongProcess() .done(useResult) .always(logCompletion) .fail(logFailure); doSomethingElse(); //time passes... task.fail(function(){ alert('error'); });
- 59. Tidy Callbacks var task= startLongProcess() .always(logCompletion) .fail(logFailure); $.when(task, otherTask) .then(function(args1, args2){ useResult(args1[0]) .done(updateScreen); });
- 60. Deferreds in timeto relearn some features
- 61. Ajax var fetch =$.get('/data.aspx') .done(validateResponse) .done(doSomething) .done(doMoreStuff) .fail(reportError); fetch.fail(resetUI);
- 62. when() Utility $.when( $.get('/somedata'), $.get('/moredata'), $.post('/updatedata', data), someOtherDeferred) .then(function(){ alert('all done'); });
- 63. promise() $('.widget') .first().fadeOut(500).end() .last().fadeOut(1000).end() .promise() //default: 'fx' queue .done(function(){ //do something... });
- 64. re Deferred ca p •common way for callbacks •returned by jQuery Ajax •for command queues too
- 65.
- 66. github https:// github.com/jquery
- 67. github https:// github.com/jquery
- 68. Build It, Run checkout QUnit
- 69. Question s?
- 70.
- 71.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 for this talk I'll assume you all know the basics of jQuery and have been using it for DOM manipulation and Ajax calls. I'll show some of the other things in jq that could be labeled as intermediate to advanced. I'll try to highlight anything that is new in 1.7.\n
- #6 for this talk I'll assume you all know the basics of jQuery and have been using it for DOM manipulation and Ajax calls. I'll show some of the other things in jq that could be labeled as intermediate to advanced. I'll try to highlight anything that is new in 1.7.\n
- #7 I normally don't like presentations that are all about tricks and trips because it's hard to keep track of everything. I'll try to keep the machine gun quiet but I still wanted to highlight a handful of helpful gems in jq.\n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 DEMO!\n
- #14 \n
- #15 DEMO!\n
- #16 \n
- #17 \n
- #18 \n
- #19 DEMO!\n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 this should be familiar to most of you. The Select() Linq extension does that for IEnumerables in .net. We do the conversion with callback.\n
- #29 this should be familiar to most of you. The Select() Linq extension does that for IEnumerables in .net. We do the conversion with callback.\n
- #30 But there are a few things to note in the callback function.\n
- #31 \n
- #32 Event handling is one of the main reasons we use jquery for...\n
- #33 It makes it so easy to watch for an event of an element... just choose the element and...\n
- #34 Oh, that's that too. It's easy but it takes a little practice to pick the most efficient route. I'm sure a few of us still has to think about it or look up docs to choose the right one for the task.\n
- #35 both bind and live allow us to setup handlers for one or many elements in a single command. Select all the elements you want and attach the handler. main diff: dynamically added elements\n
- #36 unique elements: elements that don't have a similar purpose with any other element on the page.\n
- #37 OK, it was easy to figure out between the previous 2. But those two appear to do the same. Attach a handler for a selector.\nDiff: delegate() attaches a handler to the parent, not Doc. Syntax.\n
- #38 \n
- #39 on() can also take a data parameter that goes to event.data\n
- #40 \n
- #41 \n
- #42 global events\n
- #43 \n
- #44 DEMO!\n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 DEMO!\n
- #56 \n
- #57 \n
- #58 \n
- #59 this is possible way to invoke a callback-based async function... note the two different callbacks, for success and error. note the duplication too.\n
- #60 it could get worse. look what would happen if useResult was also async... what if an error happens in useResult? another error callback?\n
- #61 see how much cleaner the code becomes when we introduce the deferred task object.\nWe can even subscribe later and it will fire immediately if the task has completed already. DEMO1!\n
- #62 the tasks allow us to compose more complicated scenarios without sacrificing too much the read-ability of the code.\n
- #63 \n
- #64 \n
- #65 DEMO2!\n
- #66 Internally jQuery can maintain queues of actions. One such queue is the one that allows effects to execute sequentially.\nThe promise command returns a deferred task that resolves when the queue empties.\n
- #67 \n
- #68 \n
- #69 \n
- #70 show github, show how files are split, show local repo, build\n
- #71 \n
- #72 \n
- #73 \n
- #74 \n