Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Robust jQuery Plugins
Why bother?
<ul><li>$.each({ </li></ul><ul><li>focus: 'focusin', </li></ul><ul><li>blur: 'focusout' </li></ul><ul><li>}, function( ori...
Don't reinvent the wheel
“  Given enough eyeballs, all bugs are shallow  ” -- Eric S. Raymond
Infrastructure
Design
Consider the audience
 
 
 
<ul><li>jQuery.validator. addMethod (&quot;domain&quot;, function(value) { </li></ul><ul><li>return /^http://mycorporatedo...
 
Test-driven development
 
 
Tests first
Behaviour-driven developement
Why bother?
QUnit
test(&quot;my ajax code&quot;, function() { expect(1); stop(); $.get(&quot;myurl&quot;, function(response) { equals(respon...
Implementing
(function($) {   $.fn.plugin = function() {   return this.each(function() {   // your code here   });   }; })(jQuery);
(function($) {   $.fn.delegate = function(type, delegate, handler) {   return this.bind(type, function(event) {   var targ...
(function($) {   $.fn.plugin = function(settings) {   settings = $.extend({}, $.plugin.defaults, settings);   return this....
Document
<ul><li>/** </li></ul><ul><li>* The number of elements currently matched. </li></ul><ul><li>* </li></ul><ul><li>* @example...
Purpose
Dependencies
Pulic API
Options
Examples
Browsing
 
Release
jquery.plugin-1.2.3.zip - jquery-plugin-1.2.3 jquery.plugin.js jquery.plugin.min.js jquery.plugin.pack.js - demo [-docs] [...
<target name=&quot;tooltip&quot;>   <antcall target=&quot;generic&quot;>   <param name=&quot;name&quot; value=&quot;toolti...
1.3 --- * Added fade option (duration in ms) for fading in/out tooltips; IE <= 6 is excluded when bgiframe plugin is inclu...
 
 
Maintain
Avoid Blog Comments
 
 
 
 
 
Mailing list
 
 
General questions
Tracking
Thank you
Questions?
Bon appétit!
Upcoming SlideShare
Loading in …5
×

Building Robust jQuery Plugins

6,885 views

Published on

Presented at jQuery Conference 2008

Published in: Technology, Sports
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building Robust jQuery Plugins

  1. Building Robust jQuery Plugins
  2. Why bother?
  3. <ul><li>$.each({ </li></ul><ul><li>focus: 'focusin', </li></ul><ul><li>blur: 'focusout' </li></ul><ul><li>}, function( original, fix ){ </li></ul><ul><li>$.event.special[fix] = { </li></ul><ul><li>setup:function() { </li></ul><ul><li>if ( $.browser.msie ) return false; </li></ul><ul><li>this.addEventListener( original, $.event.special[fix].handler, true ); </li></ul><ul><li>}, </li></ul><ul><li>teardown:function() { </li></ul><ul><li>if ( $.browser.msie ) return false; </li></ul><ul><li>this.removeEventListener( original, </li></ul><ul><li>$.event.special[fix].handler, true ); </li></ul><ul><li>}, </li></ul><ul><li>handler: function(e) { </li></ul><ul><li>arguments[0] = $.event.fix(e); </li></ul><ul><li>arguments[0].type = fix; </li></ul><ul><li>return $.event.handle.apply(this, arguments); </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>}); </li></ul>
  4. Don't reinvent the wheel
  5. “ Given enough eyeballs, all bugs are shallow ” -- Eric S. Raymond
  6. Infrastructure
  7. Design
  8. Consider the audience
  9.  
  10.  
  11.  
  12. <ul><li>jQuery.validator. addMethod (&quot;domain&quot;, function(value) { </li></ul><ul><li>return /^http://mycorporatedomain.com/.test(value); } </li></ul><ul><li>, &quot;Please specify the correct domain&quot;); </li></ul><ul><li>jQuery.validator.addMethod(&quot;nowhite&quot;, function(value) { </li></ul><ul><li>return /^S+$/.test(value); </li></ul><ul><li>}, &quot;No white space please&quot;); </li></ul><ul><li>jQuery.validator.addMethod(&quot;nowhite&quot;, function(value) { </li></ul><ul><li>return /^d+$/.test(value); </li></ul><ul><li>}, &quot;Please enter only digits&quot;); </li></ul>
  13.  
  14. Test-driven development
  15.  
  16.  
  17. Tests first
  18. Behaviour-driven developement
  19. Why bother?
  20. QUnit
  21. test(&quot;my ajax code&quot;, function() { expect(1); stop(); $.get(&quot;myurl&quot;, function(response) { equals(response, &quot;expected response&quot;); start(); }); });
  22. Implementing
  23. (function($) { $.fn.plugin = function() { return this.each(function() { // your code here }); }; })(jQuery);
  24. (function($) { $.fn.delegate = function(type, delegate, handler) { return this.bind(type, function(event) { var target = $(event.target); if (target.is(delegate)) { return handler.apply(target, arguments); } }); }; })(jQuery);
  25. (function($) { $.fn.plugin = function(settings) { settings = $.extend({}, $.plugin.defaults, settings); return this.each(function() { // your code here }); }; $.plugin = { defaults: {} }; })(jQuery);
  26. Document
  27. <ul><li>/** </li></ul><ul><li>* The number of elements currently matched. </li></ul><ul><li>* </li></ul><ul><li>* @example $(&quot;img&quot;).length; </li></ul><ul><li>* @before <img src=&quot;test1.jpg&quot;/> <img src=&quot;test2.jpg&quot;/> </li></ul><ul><li>* @result 2 </li></ul><ul><li>* </li></ul><ul><li>* @property </li></ul><ul><li>* @name length </li></ul><ul><li>* @type Number </li></ul><ul><li>* @cat Core </li></ul><ul><li>*/ </li></ul><ul><li>/** </li></ul><ul><li>* The number of elements currently matched. </li></ul><ul><li>* </li></ul><ul><li>* @example $(&quot;img&quot;).size(); </li></ul><ul><li>* @before <img src=&quot;test1.jpg&quot;/> <img src=&quot;test2.jpg&quot;/> </li></ul><ul><li>* @result 2 </li></ul><ul><li>* </li></ul><ul><li>* @name size </li></ul><ul><li>* @type Number </li></ul><ul><li>* @cat Core </li></ul><ul><li>*/ </li></ul><ul><li>size: function() { </li></ul><ul><li>return this.length; </li></ul><ul><li>}, </li></ul><ul><li>length: 0, </li></ul>
  28. Purpose
  29. Dependencies
  30. Pulic API
  31. Options
  32. Examples
  33. Browsing
  34.  
  35. Release
  36. jquery.plugin-1.2.3.zip - jquery-plugin-1.2.3 jquery.plugin.js jquery.plugin.min.js jquery.plugin.pack.js - demo [-docs] [-test]
  37. <target name=&quot;tooltip&quot;> <antcall target=&quot;generic&quot;> <param name=&quot;name&quot; value=&quot;tooltip&quot; /> </antcall> </target> ant tooltip
  38. 1.3 --- * Added fade option (duration in ms) for fading in/out tooltips; IE <= 6 is excluded when bgiframe plugin is included * Fixed imagemaps in IE, added back example * Added positionLeft-option - positions the tooltip to the left of the cursor * Remove deprecated $.fn.Tooltip in favor of $.fn.tooltip 1.2 --- * Improved bodyHandler option to accept HTML strings, DOM elements and jQuery objects as the return value * Fixed bug in Safari 3 where to tooltip is initially visible, by first appending to DOM then hiding it * Improvement for viewport-border-positioning: Add the classes &quot;viewport-right&quot; and &quot;viewport-bottom&quot; when the element is moved at the viewport border. * Moved and enhanced documentation to docs.jquery.com * Added examples for bodyHandler: footnote-tooltip and thumbnail * Added id option, defaults to &quot;tooltip&quot;, override to use a different id in your stylesheet * Moved demo tooltip style to screen.css * Moved demo files to demo folder and dependencies to lib folder * Dropped image map example - completely incompatible with IE; image maps aren't supported anymore
  39.  
  40.  
  41. Maintain
  42. Avoid Blog Comments
  43.  
  44.  
  45.  
  46.  
  47.  
  48. Mailing list
  49.  
  50.  
  51. General questions
  52. Tracking
  53. Thank you
  54. Questions?
  55. Bon appétit!

×