Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
jQueryIn with the new,out with the old.
Agenda๏ Understanding jQuery๏ Whats new & interesting๏ Where you dont need it
GrokkingjQuery
DOM library
$(div).append(html).click(doStuff);
Just a CSS selector$(div).append(html).click(doStuff);
$(div).append(html).click(doStuff);
$(div).append(html).click(doStuff);
if ( $(foo) ) {  doAmazing();}
1) $(foo)2) $()3) []4) [].join(,) // works
if ( $(foo) ) {  doAmazing();}
if ( $(foo).length ) {  doAmazing();}
If your jQuery code fails,and theres no error:its the selector
DOM Navigation
FindChanges the collection
Filter Creates a subset
Debugging
NewStuff
Ajax changes  & Deferreds
$.get(foo.html, function (html) {var jqXHR = $.get(foo.html);  $(#latest).append(html);});jqXHR.done(function (html) {  $(...
$.ajax({  url: foo.json,  dataType: json,  success: function () {     // this === xhr  },  error: function () {  }});
$.ajax({  url: foo.json,  dataType: json,  context: document.body,  success: function () {     // this === body element  }...
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});jqXHR.then(success, fail);
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});jqXHR.then(success, fail);// much later in...
jqXHR is apromise
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});// much later in the codejqXHR.done(succes...
.done(ok)   // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
var dfd = $.Deferred();    .resolve    .reject    .promise
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});// much later in the codejqXHR.done(succes...
function save(data) {  var dfd = new $.Deferred();    // some validation done...    if (!valid) {      dfd.reject(reason);...
nction save(data) {var dfd = new $.Deferred();// some validation done...if (!valid) {             save({ /* some data */ }...
$.when
$.whenvar $boxes = $(div),    rand = Math.random,    dfds = [];for (var i = 0; i < 3; i++) {  dfds.push($.Deferred());  $b...
$.sub()
(function ($) {  $ = $.sub(); // sandbox $.fn  $.fn.logger = function () {    return this.each(function(){      console.lo...
(function ($) {  $ = $.sub(); // sandbox $.fn  $.fn.logger = function () {    return this.each(function(){      console.lo...
Doing itwrong
.ready?...<!-- all my funky markup -->...<script>$(document).ready(function () {  // add the extra funk});</script></body>...
.ready?...<!-- all my funky markup -->...<script>  // add the extra funk</script></body></html>
Add class...<!-- all my funky markup -->...<script>$(#foo).addClass(amazing);</script></body></html>
Add class...<!-- all my funky markup -->...<script>var f = document.getElementById(foo);foo.className +=  amazing;</script...
Effects vs. CSS๏ Ifthe browser can do it natively, let it do it natively.๏ Noone lost business because IE didnt do a cross...
return false$(a).click(function () {  // do the magic  amazingMagic();  return false;});
return false๏ Do you know whats happening?๏ event.preventDefault()๏ event.stopPropagation()
Get to know this$(a).click(function (e) {  e.preventDefault();  var href = $(this).attr(href);  // do the magic  amazingMa...
Get to know this$(a).click(function (e) {  e.preventDefault();  var href = this.href;  // do the magic  amazingMagic(href)...
Poorly designed plugins
$.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // ...
$.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
$.fn.myplugin = function () {  return $(this).each(fn);};
$.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // do...
$.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // do...
$.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does ...
$.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does ...
$.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does somethi...
$.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does somethi...
$.fn.myplugin = function () {   return this.bind(someEvent, function () {     // does something  });};
(function ($) {  $.fn.myplugin = function () {    return this.bind(someEvent, function () {       // does something     })...
Questions?@remremy@leftlogic.com
jQuery: out with the old, in with the new
jQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Nächste SlideShare
Wird geladen in …5
×

jQuery: out with the old, in with the new

2.487 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • @mathias - absolutely right. I quickly added that slide last minute and I did have a gut feeling that .attr('href') was the source value of the markup, rather than the DOM. The real examples I see they don't care whether it's relative or absolute, and often it's used to get the hash out - which should just be this.hash. Thanks for the comment though - I'll update my future slides (/if/ I do this deck again... :) - cheers.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Slide 48 and 49: `$(this).attr('href')` equals `this.getAttribute('href')`, not `this.href`. The latter usually gets normalized into the full resolved URL while the attribute value can be a relative reference.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

jQuery: out with the old, in with the new

  1. 1. jQueryIn with the new,out with the old.
  2. 2. Agenda๏ Understanding jQuery๏ Whats new & interesting๏ Where you dont need it
  3. 3. GrokkingjQuery
  4. 4. DOM library
  5. 5. $(div).append(html).click(doStuff);
  6. 6. Just a CSS selector$(div).append(html).click(doStuff);
  7. 7. $(div).append(html).click(doStuff);
  8. 8. $(div).append(html).click(doStuff);
  9. 9. if ( $(foo) ) { doAmazing();}
  10. 10. 1) $(foo)2) $()3) []4) [].join(,) // works
  11. 11. if ( $(foo) ) { doAmazing();}
  12. 12. if ( $(foo).length ) { doAmazing();}
  13. 13. If your jQuery code fails,and theres no error:its the selector
  14. 14. DOM Navigation
  15. 15. FindChanges the collection
  16. 16. Filter Creates a subset
  17. 17. Debugging
  18. 18. NewStuff
  19. 19. Ajax changes & Deferreds
  20. 20. $.get(foo.html, function (html) {var jqXHR = $.get(foo.html); $(#latest).append(html);});jqXHR.done(function (html) { $(#latest).append(html);});
  21. 21. $.ajax({ url: foo.json, dataType: json, success: function () { // this === xhr }, error: function () { }});
  22. 22. $.ajax({ url: foo.json, dataType: json, context: document.body, success: function () { // this === body element }, error: function () { }});
  23. 23. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);
  24. 24. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);// much later in the codejqXHR.done(success2);
  25. 25. jqXHR is apromise
  26. 26. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  27. 27. .done(ok) // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
  28. 28. var dfd = $.Deferred(); .resolve .reject .promise
  29. 29. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  30. 30. function save(data) { var dfd = new $.Deferred(); // some validation done... if (!valid) { dfd.reject(reason); } else { $.ajax({ url: /app/save, data: data, success: dfd.resolve, error: dfd.reject }); } return dfd.promise();}
  31. 31. nction save(data) {var dfd = new $.Deferred();// some validation done...if (!valid) { save({ /* some data */ }) dfd.reject(reason); .done(function () {} else { // show its all good $.ajax({ }) url: /app/save, data: data, .fail(function (reason) { success: dfd.resolve, // shows reason error: dfd.reject }); });}return dfd.promise();
  32. 32. $.when
  33. 33. $.whenvar $boxes = $(div), rand = Math.random,    dfds = [];for (var i = 0; i < 3; i++) {  dfds.push($.Deferred());  $boxes.eq(i).fadeTo(rand() * 5000, 1, dfds[i].resolve);}$.when.apply($, dfds).done(function () {  alert(all done!);});
  34. 34. $.sub()
  35. 35. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger()})(jQuery);// now: $.fn.logger === undefined
  36. 36. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger()})(jQuery);// now: $.fn.logger === undefined
  37. 37. Doing itwrong
  38. 38. .ready?...<!-- all my funky markup -->...<script>$(document).ready(function () { // add the extra funk});</script></body></html>
  39. 39. .ready?...<!-- all my funky markup -->...<script> // add the extra funk</script></body></html>
  40. 40. Add class...<!-- all my funky markup -->...<script>$(#foo).addClass(amazing);</script></body></html>
  41. 41. Add class...<!-- all my funky markup -->...<script>var f = document.getElementById(foo);foo.className += amazing;</script></body></html>
  42. 42. Effects vs. CSS๏ Ifthe browser can do it natively, let it do it natively.๏ Noone lost business because IE didnt do a cross fade.
  43. 43. return false$(a).click(function () { // do the magic amazingMagic(); return false;});
  44. 44. return false๏ Do you know whats happening?๏ event.preventDefault()๏ event.stopPropagation()
  45. 45. Get to know this$(a).click(function (e) { e.preventDefault(); var href = $(this).attr(href); // do the magic amazingMagic(href);});
  46. 46. Get to know this$(a).click(function (e) { e.preventDefault(); var href = this.href; // do the magic amazingMagic(href);});
  47. 47. Poorly designed plugins
  48. 48. $.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });  return me;};
  49. 49. $.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
  50. 50. $.fn.myplugin = function () {  return $(this).each(fn);};
  51. 51. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  52. 52. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  53. 53. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  54. 54. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  55. 55. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  56. 56. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  57. 57. $.fn.myplugin = function () { return this.bind(someEvent, function () {  // does something  });};
  58. 58. (function ($) { $.fn.myplugin = function () {   return this.bind(someEvent, function () {    // does something  }); };})(jQuery);
  59. 59. Questions?@remremy@leftlogic.com

×