CODEWITHSUNDEEP
jquery
Wex
Wex

Reputation: 15695

Should I write a plugin or just use a function?

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?

Upvotes: 0

Views: 65

Answers (2)

Evan
Evan

Reputation: 6115

here is some information about increasing modularity with Jquery:

  • using "this" keyword
  • use data objects to keep track of state or extra information you need in your handler
  • design your html intelligently, and keep selectors broad
  • use toggle
  • write your own plugins

So for example, assuming that your #show element is also a link, and your html looks like this:

<div class="myButtons">
    <a id="show" data-fade="show"></a>
    <a id="close" data-fade="fade"></a>
</div>

you can do things like this instead of having multiple handlers:

$('.myButtons a').click(function(){
    var func = $(this).data("fade");

    if (func === "show"){
        $("#view").fadeIn(500);
    }
    else if(func === "hide"){
        $("#view").fadeOut(500);
    }
});

For the exact answer on how to just make your above code more modular, just check out jquerys toggle(), but as for the overall, you want to take these other methods into account. You have a lot more power at your fingertips when you incorporate these other elements.

Upvotes: 1

Mike Gwilt
Mike Gwilt

Reputation: 2449

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/

Upvotes: 1

Related Questions