I'm working on a project where we are doing a lot of custom javascript and especially jquery, on an mvc style project.

The only problem is that I keep adding more and more global functions/variables and they are piling up. I've got a few files but I'm unsure how to split some of the stuff up into separate files.

I've thought about posing some of these function and global variables into objects, but the object syntax in javascript seems a little awkward to me (because of the absence of classic classes). Though if I had a good example to follow maybe I could e around.

How do you deal with a project where the global javascript functions and variables start piling up like this?

I'm working on a project where we are doing a lot of custom javascript and especially jquery, on an mvc style project.

The only problem is that I keep adding more and more global functions/variables and they are piling up. I've got a few files but I'm unsure how to split some of the stuff up into separate files.

I've thought about posing some of these function and global variables into objects, but the object syntax in javascript seems a little awkward to me (because of the absence of classic classes). Though if I had a good example to follow maybe I could e around.

How do you deal with a project where the global javascript functions and variables start piling up like this?

• javascript
• jquery
• refactoring
• object
• global-variables

• I don't think JavaScript's object syntax could reasonably be described as a hack. If anything, it's the most elegant part of the language. If you mean trying to shoehorn classes in is painful, I couldn't agree with you more. It's an object-oriented language, not a class-based language. – Nosredna Commented Jun 9, 2009 at 22:40

4 Answers 4

A very simple way to pile a bunch of global variables and functions into a single global object:

// Awful pile of globally-scoped names
var foo = 1
var bar = 2
function go = function(){
    console.log('Yeehaw!');
}


// Instead, just dump everything into a global-level object
var MyApp = {
    foo: 1,
    bar: 2,
    go: function(){
        console.log('Yeehaw!');
    }
}  

// Now access stuff like this
console.log(MyApp.foo);
console.log(MyApp.bar);
MyApp.go();

For "simple" top-level variables and functions, I can remend this. There are plenty of improvements that can be made to this, but they'll probably fall under the category of premature optimizations; this is a great first step.

The Crockford Videos on YUI theater are a good example of how to set up JavaScript namespaces among other things.

You could break them up similarly to what jquery.ui does... by categories or by action/control

ex:

effects.blind.js
effects.bounce.js
ui.accordion.js

Can they be broken up into the Controls that they deal with?

Or by what they do?

Just some suggestions...

If you are working with jQuery, the first way to organize your code is to build jquery plugins:

http://docs.jquery./Plugins/Authoring

http://www.learningjquery./2007/10/a-plugin-development-pattern

As you mentioned mvc, there is various javascript implementations out there, but I'm not sure they are hugely popular: jamal, javascript mvc,

http://jamal-mvc.

http://javascriptmvc.