Making a simple jQuery plug-in

Dylan Fogarty-MacDonaldhttp://dylanfm.com@dylanfm

jQuery

jquery.comA Javascript library.

jQuery plug-ins

Two types of plug-ins:

Utility functionsjQuery.map( array, callback )

jQuery commands
$("p").click( function )

An example of writing a little plug-in

Spock *
A jQuery command which will (hopefully) find proper nouns in the elements' text and wrap them in a span with a class of keyword.

$("p").spock();

* I was watching an episode of Star Trek at the time.

Steps

Create a file for the plug-in

1. Create a file for the plug-in

Naming convention:

jquery.plug-in-name.js

In Spock's case:

jquery.spock.js

Steps

Create a file for the plug-in

Make a closure

2. Make a closure

All plug-in code should be within a closure. Pass jQuery to the closure and alias it to $. This allows you to safely use $ within your plug-in code (and not worry about clashing with other libraries or frameworks who use $ too).

(function ($) {

// 1227 plug-1n c0dez go here

})(jQuery);

Steps

Create a file for the plug-in

Make a closure

Define the jQuery command

3. Define the jQuery command

Extend the $.fn object. *

(function ($) {$.fn.extend({spock: function() { // Stop. Hammertime!} });})(jQuery);

* $.fn is an alias for the prototype property of the jQuery constructor function.

Steps

Create a file for the plug-in

Make a closure

Define the jQuery command

Return the jQuery wrapped set from function body

4. Return jQuery wrapped set

jQuery hackers don't want their chains broken.

$("#jQuery").find("haxors").give("wine").and("cheese");

Return a jQuery wrapped set so your plug-in can take part in the chain:

return $(this);

Steps

Create a file for the plug-in

Make a closure

Define the jQuery command

Return the jQuery wrapped set from function body

Set up options hash

5. Set up options hash

Users of the plug-in will want to configure it. Set up a hash of defaults and allow them to be overridden by options passed to the plug-in function when it's called.

$("p").spock({ spanClass: "encino-man"});

5. Set up options hash

(function ($) { var opts;

$.fn.extend({ spock: function(options) { opts = $.extend({},$.fn.spock.defaults,options); } }); $.fn.spock.defaults = { spanClass: "keyword" };})(jQuery);

Steps

Create a file for the plug-in

Make a closure

Define the jQuery command

Return the jQuery wrapped set from function body

Set up options hash

Private methods

6. Private methods

$.fn.extend({ spock: function(options) { opts = $.extend({},$.fn.spock.defaults,options); return this.each(processElements); } });

function processElements () { // Frodo, don't put on the ring }

Steps

Create a file for the plug-in

Make a closure

Define the jQuery command

Return the jQuery wrapped set from function body

Set up options hash

Private methods

Events

7. Events

Your users will probably want to customise functionality. Assign a private method to a default option. Call the method through its option property. This way the users can hook into events via the options hash.

$("p").spock({ processKeyword: function (match) { return ""+match+""; }});

7. Events

$.fn.spock.defaults = { processKeyword: processKeyword };

function processElements () { // ... return opts.processKeyword(match); // ... }

function processKeyword (match) { // Kiss my aura, Dora. }

Thanks

The Spock code is on Github:http://github.com/DylanFM/jquery-spock

I'll put these slides online and tweet it through: @dylanfm