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.

1. Golden rules of
jQuery Plugin
development
Bastian Feder Techtalk
lapistano@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 be
what you think.“
$ should never be used in plugins
jQuery allows redefining of the $ for
compatibity
$.noConfict()
Always use jQuery

9. „Do not pollute the global
scope!“
(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 or
multiple 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 options
accessible 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 options
accessible 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 namespace
when 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
@lapistano
lapistano@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