JQuery plugin development fundamentals

1,693
-1

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,693
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×