Trying to concatenate all my JS into one file and

Question

Just in case it matters, I use ASP.NET 3.5 with VB.NET. I have nested MasterPages and UpdatePanels with Partial PostBacks. I include Modernizr 1.7 with YepNopeJs/IE Shim in my head section. Right before the closing body tag, I include my jQuery 1.6, jQuery UI 1.8.12, and this script.js I'm trying to build.

I'm thinking of using something like:

SITE = {

    PAGES     : { ... },
    VARS      : { ... },
    HELPERS   : { ... },
    PLUGINS   : { ... },

    init      : function() { ... }

};

SITE.init();

UPDATE

Ok with Levi's advice, I came up with this solution:

var SFAIC = {};                                   // Global namespace

SFAIC.common = { ... };                           // Shared properties
SFAIC.common.fn = { ... };                        // Shared functions
SFAIC.plugin = {

    qtip: $.fn.qtip,
    validate: $.fn.validate,
    validator: $.fn.validator

};
SFAIC.init = function() { ... };                  // Global initializer

$(document).ready(function() { SFAIC.init(); });

Then each page would have its own object literal like:

SFAIC.Main = {};                                  // Main.aspx 

SFAIC.Main.someSection = { ... };                 // Some Section's properties
SFAIC.Main.someSection.fn = { ... };              // Some Section's functions
SFAIC.Main.anotherSection = { ... };              // Another Section's properties
SFAIC.Main.anotherSection.fn = { ... };           // Another Section's functions
SFAIC.Main.init = function() { ... };             // Main.aspx's intializer

$(document).ready(function() { SFAIC.Main.init(); });

Answer 1

For Production:

Use a package like closure, uglify or the one I mention at the end to package all your code into one file and send that.

For Development:

I would recommend for structure you use a asynchronous javascript loader like

require.js.

This means you have lot's of modules and you specifically state the dependancies.

For example you would have one main.js

// main.js

require([
    "jquery.js",
    "jquery.ui.js", 
    ...
], function() {
    // if the correct location is "mysite.com/foo/" then url will be "foo"
    var url = window.location.pathname.match(/\/(\w+)\//)[1] || "mainpage";
    require(url + ".js", function(pageObj) {
        // ...
    });
});

// foo.js

define({
    pageStuff: ...
});

I recommend you read through the requireJS docs to understand their structuring system. It's one of the best I've found.

When it comes to optimising all javascript into one file you just use their builder. This should be part of your project deploy system.

Answer 2

I recommend that you make a new object for section and a new function for each page/item. However, the more scripts you add in this way, the harder it gets to manage the whole in an editor. Netbeans has a feature that lets you jump to parts of the object and helps manage this.

Example:

var lib = {}; // your library

//maybe you like the plural name plugins better. That's fine.
lib.plugin = {
    //define plugins here
};

//maybe you like the plural name helpers better. That's fine too.
lib.helper = {
    //define your helpers here
    cycle: function() {
        //code for the cycle plug-in
    }
};

lib.account = {
    //you could stick code that is general to all account pages here
};

lib.account.overview = function() {
    //you could stick code that is specific to the account overview page here
    //maybe you'd use the cycle plug-in to show their latest posts.
    lib.plugin.cycle();

};

lib.account = {
    //you could stick code that is general to all account pages here
};

lib.account.overview = function() {
    //you could stick code that is specific to the account overview page here
    //maybe you'd use the cycle plug-in to show their latest posts.

    lib.plugin.cycle();

};

Then on the Account Overview page you'd call lib.account.overview().