Advice on refactoring large JavaScript methods

Question

In this case, the site is an internal website that is only able to be viewed on IE6. The goal is get it viewable in IE9. There are several IE only propriety scripting such as using xml data islands, accessing document elements by dot notation, i.e., resulttable.style.display = "block";, etc... The aforemention is probably a bit superfluous to the problem at hand, but it could provide some insight.

Throughout the website, there is a huge number of JavaScript methods which are quite large and are hard to debug. To give you an idea, there are upwards of 100 JS files averaging around 1000 lines each.

The following is an actual method with all of the names/logic omitted. All of the return values are dependent on previous logic:

function someMethod() {
if (stuff) {
    // operations
    if (stuff) {
        // operations
        for (loop) {
            // operations
            if (stuff) {
                // operations
                if (stuff) {
                    // operations
                    for (loop) {
                        if (stuff) {
                            // operations
                        }
                    }
                    // operations
                }
                else {
                    // operations
                    if (stuff) {
                        // operations
                    } else {
                        // operations
                    }
                }
                // operations
            }
        }

        // operations

        if (stuff) {
            // operations
            if (stuff) {
                // operations
                if (stuff) {
                    // operations
                    for (stuff) {
                        // operations
                        if (stuff) {
                            // operations
                        } else {
                            // operations
                        }
                    }
                    if (stuff) {
                        // operations
                        if (stuff) {
                            // operations
                            for (loop) {
                                // operations
                            }
                            // operations
                            for (loop) {
                                if (stuff) {
                                // operations
                                }
                            }
                        }
                        // operations
                        if (stuff) {
                            // operations
                        }
                        return something;
                    }
                    else {
                        // operations
                        return something;
                    }
                }
                else {
                    // operations
                    if (stuff) {
                        // operations
                        return something;
                    }
                    else {
                        // operations
                        if (stuff) {
                            // operations
                        }
                        // operations
                        return something;
                    }
                }
            }
        }
        return something;
    }
    else {
        // operations
        return something;
    }
}
return something;
}

When dealing with a legacy website, what advice would you have breaking down JavaScript methods into more manageable pieces?

Disclaimer: My JS skillset is on the average side of things. And we'd like to steer clear of JQuery for now.

Answer 1

You could simply break someMethod() into individual functions where the logic can be repeated.

Also without looking into the specific logic you have and finding the patterns that best fit the logic some general patterns that may help are

The Module pattern e.g.

var MyModule = function() {
    function privateFn() {
    }
    function publicFn() {
    }
    function doWork(args) {
    }

    return {
        publicFn: publicFn,
        doWork: doWork,
    };
}();
MyModule.doWork({ param1: 'test', param2: true});

Prototypal inheritance can be used similar to classes in c#/Java e.g.

var MyClass = function(args) {
    this.prop1 = 'test'
    this.prop2 = args.param1;
};
MyClass.prototype.doWork = function(args) {
};
var myInstance = new MyClass({ param1: 'test' });
myInstance.doWork({ param1: true });

You can organise these using namespaces e.g.

if (window.MyNamespace === undefined) window.MyNamespace = {};
MyNamespace.MyModule = function () { ... };
MyNamespace.MyClass = function () { ... };
MyNameSpace.MyModule.doWork();

Additional patterns that may help can be found here http://shichuan.github.com/javascript-patterns/