Trying To Concatenate All My Js Into One File And Needing Some Js Framework/pattern Type Advice

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 he

Solution 1:

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 herecycle: 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().

Solution 2:

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.jsrequire([
    "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.jsdefine({
    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.