View
3.438
Download
0
Category
Preview:
Citation preview
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
Recommended