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,330 views

Published on

Presented at jQuery Conference 2008

Published in: Technology, Sports
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,330
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
172
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • Goal is to show to how build a robust jQuery plugin, way beyond just coding. Your take-away should be an understanding of the surrounding infrastructure, both to be able to use and to help improve it. We&apos;ve got about 50 minutes. My talk should take about 30 minutes, giving us 20 minutes for open discussion. Please ask questions whenever you want to, though I may defer some answers to the end. To start, lets look at the most important question.
  • 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!

    ×