jQuery PluginsjQuery PluginsjQuery PluginsjQuery Plugins

Authoring Code for ReuseAuthoring Code for ReuseAuthoring Code for ReuseAuthoring Code for Reuse

ModularizationModularizationModularizationModularization

Write once, throw it away.Write once, throw it away.

Write once use it again.Write once use it again.

Initial cost in time to implement, savings Initial cost in time to implement, savings

realized later.realized later.

jQuery IntegrationjQuery IntegrationjQuery IntegrationjQuery Integration

Attach it directly to the jQuery object.Attach it directly to the jQuery object.

• $.plugIn1 = function() {$.plugIn1 = function() {

• console.log("This is plugin ONE!");console.log("This is plugin ONE!");

• };};

Put your code inside a jQuery closure:Put your code inside a jQuery closure:

• (function($) {(function($) {• // Define method here.// Define method here.• $.plugIn2 = function() {$.plugIn2 = function() {• console.log("Plugin TWO is console.log("Plugin TWO is working!");working!");• };};• })(jQuery);})(jQuery);

Use jQuery’s extend method:Use jQuery’s extend method:• $.fn.extend({$.fn.extend({• plugIn4 : function() {plugIn4 : function() {

• this.plugIn4.number = 1;this.plugIn4.number = 1;• return this.each(function(){return this.each(function(){

• console.log("This is element console.log("This is element number: " number: " • + $.fn.plugIn4.number );+ $.fn.plugIn4.number );

• $.fn.plugIn4.number += 1;$.fn.plugIn4.number += 1;• });});• }}• });});

We can enclose the extended plugin in a jQuery We can enclose the extended plugin in a jQuery

closure and give it options:closure and give it options:

• (function($) {(function($) {•$.fn.extend({$.fn.extend({• hilite : function(options) {hilite : function(options) {

•return this.each(function() {return this.each(function() {• // Define what you want to do with your items.// Define what you want to do with your items.

• });});• }}

• });});• })(jQuery);})(jQuery);

Attaching code directly to the jQuery object is the Attaching code directly to the jQuery object is the

most limited type of plugin. This is a very poor most limited type of plugin. This is a very poor

choice.choice.

Using a jQuery closure provides namespacing, Using a jQuery closure provides namespacing,

but lacks built-in jQuery functionality. This is but lacks built-in jQuery functionality. This is

appropriate for many types of widgetsappropriate for many types of widgets

Using the jQuery extend method gives your Using the jQuery extend method gives your

plugin all the built-in power that native jQuery plugin all the built-in power that native jQuery

methods have.methods have.

We’re Hiring!We’re Hiring!We’re Hiring!We’re Hiring!

Bee Tan, Hiring Bee Tan, Hiring ManagerManager

510 307-8225510 307-8225