Golden rules of               jQuery Plugin               developmentBastian Feder                       Techtalklapistano...
Why?
Why? Consistency Collaboration Coding guideline Distribution
Golden rules
Naming Name your file   jquery.[name of plugin].js Prefix all related files with the name of your plugin.   jquery.myPlugi...
Registration Register in jQuery.fn Respect single responsibility paradigma Pluginname === methodname (constructor)
Registration            (cont.) (function($, jQuery, undefined){  jQuery.fn.myPlugin = function(options) {      ...      /...
„Be aware! $ might not bewhat you think.“ $ should never be used in plugins   jQuery allows redefining of the $ for   comp...
„Do not pollute the globalscope!“ (function($, jQuery, undefined){  ...  // your plugin code goes here  ... })(jQuery, jQu...
„Obey the fluent interface“ (function($, jQuery, undefined){  jQuery.fn.myPlugin = function(options) {      ...      retur...
„Handle sets of zero, one ormultiple elements.“ (function($, jQuery, undefined){  jQuery.fn.myPlugin = function(options) {...
„Make default optionsaccessible from outside!“ (function($, jQuery, undefined){  jQuery.fn.myPlugin = function(options) { ...
„Make default optionsaccessible from outside!“ (function($, jQuery, undefined){  jQuery.fn.myPlugin = function(options) { ...
„Always use namespacewhen handling events“ $(#myElement).bind(click.myPlugin, callback());
Further resources Official plugin repository   http://plugins.jquery.com Official plugin authoring rules   http://docs.jqu...
Questions@lapistanolapistano@php.net
License This set of slides and the source code included   in the download package is licensed under the Creative Commons A...
Upcoming SlideShare
Loading in...5
×

JQuery plugin development fundamentals

1,543

Published on

JQuery became more and more polular over the years. Luckily this was somehow forseen by the inventors and they introduces a set of guidelines how plugins are to be developed in terms of encapsulation, behavior to the framework, et al. These guidelines are reflected in the 'golden rules of plugin development'.
This presentation is all about them.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,543
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "JQuery plugin development fundamentals"

  1. 1. Golden rules of jQuery Plugin developmentBastian Feder Techtalklapistano@php.net th 24 April 2012
  2. 2. Why?
  3. 3. Why? Consistency Collaboration Coding guideline Distribution
  4. 4. Golden rules
  5. 5. Naming Name your file jquery.[name of plugin].js Prefix all related files with the name of your plugin. jquery.myPlugin.css
  6. 6. Registration Register in jQuery.fn Respect single responsibility paradigma Pluginname === methodname (constructor)
  7. 7. Registration (cont.) (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { ... // Your source code goes here ... } })(jQuery, jQuery);
  8. 8. „Be aware! $ might not bewhat you think.“ $ should never be used in plugins jQuery allows redefining of the $ for compatibity $.noConfict() Always use jQuery
  9. 9. „Do not pollute the globalscope!“ (function($, jQuery, undefined){ ... // your plugin code goes here ... })(jQuery, jQuery);
  10. 10. „Obey the fluent interface“ (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { ... return this; } })(jQuery, jQuery);
  11. 11. „Handle sets of zero, one ormultiple elements.“ (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { return this [.filter(element)] .each( function(){ // “real“ plugin code goes here ... }); } })(jQuery, jQuery);
  12. 12. „Make default optionsaccessible from outside!“ (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { options = jQuery.extend( {}, jQuery.fn.myPlugin.defaults, options ); ... } jQuery.fn.myPlugin.defaults = { // your default options go here } })(jQuery, jQuery);
  13. 13. „Make default optionsaccessible from outside!“ (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { options = jQuery.extend( {}, jQuery.fn.myPlugin.defaults, options ); ... } jQuery.fn.myPlugin.defaults = { // your default options go here } })(jQuery, jQuery);
  14. 14. „Always use namespacewhen handling events“ $(#myElement).bind(click.myPlugin, callback());
  15. 15. Further resources Official plugin repository http://plugins.jquery.com Official plugin authoring rules http://docs.jquery.com/Plugins/Authoring jQuery documentation http://docs.jquery.com
  16. 16. Questions@lapistanolapistano@php.net
  17. 17. License This set of slides and the source code included in the download package is licensed under the Creative Commons Attribution- Noncommercial-Share Alike 2.0 Generic License

×