Namespacing Hierarchy, Minify and Cross-Browser Compatibility

Question

I've been using the following model for Namespacing my newest Scripts. So far, it has some distinct advantages that, while I'm sure could be replicated in other ways, really help to in my coding process. Unfortunately, I've come across a significant disadvantage... When using some JS compression utilities, they mangle the code badly enough that I must avoid many advantageous options. Luckily, the code I save with this model helps mitigate the "damages".

I'm still curious to know if there is a more viable solution as the min.js only fail consistently in Chrome/IE. I know the below is a little too abstract for some. Are there any experts that might point me in the right direction. I've used YUI, Packer and JSMin. JSMin works reliably, but is not nearly as efficient...

/* Global Namspace */
(function (T) {"use strict";
    /* Top.Sub1 */
    (function(S1) {


        // ... Some methods (public/private)


        /* Top.Sub1.Mini */
        (function(M) {

            // ... Some methods (public/private)

        }(S1.Mini = S1.Mini || function(o){}));
    }
    (T.Sub1 = T.Sub1 || function(o){}));

    /* Top.Sub2 */
    (function(S2) { 

        // ... Some methods (public/private)

        /* Top.Sub2.Mini1 */
        (function(M1) {

            // ... Some methods (public/private)

        }(S2.Mini1 = S2.Mini1 || function(o) {}));

        /* Top.Sub2.Mini2 */
        (function(M2) {

            // ... Some methods (public/private)

        }(S2.Mini2 = S2.Mini2 || function(o) {}));
    } (T.Sub2 = T.Sub2 || function(o) {}));

} (window.Namespace = window.Namespace || function(o){}));

UPDATE: The most common error I am faced with is "unexpected token" of various sorts.. sometimes a ')' and sometimes a '}'. Every once in a while, it is a '('. I haven't yet addressed gzip as I want this out of the way.

UPDATE 2: Have checked/removed ns with a Tidied-jsHint passing file and still does not minify correctly. It definitely has to do with this model... Does anyone have a clear answer as to why? If not, further recommendations are welcome. PS the Github has been updated with Tidied-jsHint passing code.

Answer 1

I'd say read this article about what needs to be done and what needs to be avoided for good minification – http://alistapart.com/article/javascript-minification-part-II

And then choose a proper modules framework like AMD or commonjs .

UPD . My main advice will be to use a linter on your code like http://jshint.com and adhere to a coding style like http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml It mostly comes with explanations of why something will break in certain sitautions. It's also going to make your code more approachable for open source contributors.

Answer 2

After testing nearly every option on every minifier I could get my hands on, the code minifies quite fine. (With and without the tidy, etc...) The issue comes when any of the minifiers try to replace or obfuscate symbols. In particular, it does not handle this for loop well:

for (i = 0; i < l; i++) { 
    _.points[i] = new S.Point(_, pts[i]);
}

Removal of the loop allows for the optimization to occur correctly.