Question

I am using jquery and am really frustrated at how I write my code. I started coding in JS and Jquery a few months ago and my code looked like this:

$(document).ready(function(){

$(function(){// a function that applies a plugin to an element});

$(function(){// another function that applies a plugin to an element});

$(function(){// and another function that applies a plugin to an element});

$(function(){// yet another function that applies a plugin to an element});
});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

basically what I did before was put everything inside the $(document).ready

and here’s how I am coding now

function a(){//a function that applies plugin to an element}

function b() {// another function}

$(document.ready(function(){a(); b();});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

a little improvement, yet I am not satisfied. What if I want to call certain functions for a certain page only? are there ways to accomplish this? and I am really disgusted at how my $(document) gets really huge when I am using a lot of plugins.

How do you go about writing your functions in jquery?

Answer 1

I’d suggest at least namespacing things to ensure you don’t pollute the global namespace. For example:

var myNameSpace = {
a: function(){//a function that applies plugin to an element},
b: function() {// another function}
};

$(document).ready(function() {

myNameSpace.a();

});

The main benefit is that you’re able to compartmentalize your code into logical units of work which focus on specific tasks. It’ll make code organization substantially easier.

Rebecca Murphey did a wonderful write-up on this topic which you can read here: http://bit.ly/6og36U

You can also separate your JS into their own unique files and write a routine to leverage jQuery’s getScript() method to load the necessary files on-demand (http://docs.jquery.com/Ajax/jQuery.getScript). The key would be to determine the dependencies in your script and load the .js file at the appropriate time.