Question

I’m building a website that uses jQuery for things like Modals and form validation. I find myself able to write the code fairly easily, but it’s not very modular and I find myself re-writing a lot of the code. I have a CS background, but I’m very new to jQuery. I understand that jQuery has Object-Oriented capabilities, but I haven’t quite gotten a grasp on how that is done in jQuery, so my code looks incredibly procedural, and I’d like to be able to modularize it better.

Take something like this for example:

$("#show").click( function() {
    $("#view").fadeIn(500);
    return false;
});
$("#view .popup-close a").click( function() {
    $("#view").fadeOut(500);
    return false;
});

I have a list of similar declarations everywhere I have Modals. How would I write this statement in a more modular way?

Answer 1

If you’d like to make this into a reusable plugin throughout your site, that wouldn’t be too difficult.

I’d suggest giving the Plugins/Authoring guideline a read: http://docs.jquery.com/Plugins/Authoring

Here’s a start on how you’d go about pluginifying your popup:

(function ($) {
var methods = {
    init: function(options){},
    fadeIn: function(target, speed){
        //fade in logic here
        this.fadeIn(speed);         
    },
    fadeOut: function(target, speed){
        //fade out logic here
        this.fadeOut(speed);   
    }
};
$.fn.popup = function(method){
    // Method calling logic -straight from jquery plugin documentation
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.popup' );
    }  
};
})(jQuery);

And here’s a working example: http://jsfiddle.net/HMX9J/