• Save
JQuery plugin development fundamentals
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JQuery plugin development fundamentals

  • 1,910 views
Uploaded 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......

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,910
On Slideshare
1,908
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 2

https://twitter.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Golden rules of jQuery Plugin developmentBastian Feder Techtalklapistano@php.net th 24 April 2012
  • 2. Why?
  • 3. Why? Consistency Collaboration Coding guideline Distribution
  • 4. Golden rules
  • 5. Naming Name your file jquery.[name of plugin].js Prefix all related files with the name of your plugin. jquery.myPlugin.css
  • 6. Registration Register in jQuery.fn Respect single responsibility paradigma Pluginname === methodname (constructor)
  • 7. Registration (cont.) (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { ... // Your source code goes here ... } })(jQuery, jQuery);
  • 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. „Do not pollute the globalscope!“ (function($, jQuery, undefined){ ... // your plugin code goes here ... })(jQuery, jQuery);
  • 10. „Obey the fluent interface“ (function($, jQuery, undefined){ jQuery.fn.myPlugin = function(options) { ... return this; } })(jQuery, jQuery);
  • 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. „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. „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. „Always use namespacewhen handling events“ $(#myElement).bind(click.myPlugin, callback());
  • 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. Questions@lapistanolapistano@php.net
  • 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