Javascript Modules and Design Patterns

Question

I have some questions about the way you can create modules in JavaScript. This is the syntax I found:

var Westeros;
(function (Westeros) {
    (function (Structures) {
        var Castle = (function () {
            function Castle(name) {
                this.name = name;
            }
            Castle.prototype.build = function () {
                console.log("Castle " + this.name)
            };
            return Castle;
        })();
        Structures.Castle = Castle;
    })(Westeros.Structures || (Westeros.Structures = {}));
    var Structures = Westeros.Structures;
})(Westeros || (Westeros = {}));

var winterfell = new Westeros.Structures.Castle("Winterfell");
winterfell.build();

I took this code from Mastering Javascript Design Patterns. However I've tried to find an answer why you need this line:

    var Structures = Westeros.Structures;

If you omit this line the code works as expected. Is there any explanation for this? Maybe to "reveal" the class?

Thanks!

Damn, that's hideous code. There's a book that tells you to do that? — Robert Moskal
– Robert Moskal, Commented Dec 31, 2016 at 16:21
The line in question is completely pointless. Perhaps it is there because some subsequent example introduces more code, but in the code posted here the line does nothing. — Pointy
– Pointy, Commented Dec 31, 2016 at 16:28
It is indeed hard to read right? Any suggestions to modularize JS code? Not ECMA6 — sms343
– sms343, Commented Dec 31, 2016 at 16:48
I use require.js, it's for dependency management and modularized code — Legends
– Legends, Commented Dec 31, 2016 at 17:07

Hydrothermal · Accepted Answer · 2016-12-31 17:17:55Z

1

This code is horrifying. Here's a sample that does the exact some thing without all the pointless closures:

function Castle(name) {
    this.name = name;
}

Castle.prototype.build = function() {
    console.log("Castle " + this.name)
};

var Westeros = {
    Structures: {}
};

Westeros.Structures.Castle = Castle;

var winterfell = new Westeros.Structures.Castle("Winterfell");
winterfell.build();

When defining a "class" in ES5, all you have to do is declare a function with some arguments and place whatever initialization code you want inside. Methods are added to that function's .prototype property, and new objects using that class are created by calling its constructor function with the new keyword.

As for var Structures = Westeros.Structures;, it serves no purpose whatsoever. If you were to keep your original code sample, removing it wouldn't change anything. In fact, it can't be used even by more code further down because it's declared inside a closure and can't be accessed outside of that scope.

answered Dec 31, 2016 at 17:17

Hydrothermal

5,1317 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sms343 Over a year ago

What about if you wanna simulate namespaces? A pretty straightforward solution would be just to create a global object and then start adding objects inside of it, isn't it?

Hydrothermal Over a year ago

That's correct. If you place this code in the global scope, Westeros will be a global variable and thus Castle can be accessed anywhere through the Westeros "namespace". You could also take a look and see if RequireJS fits your needs.

sms343 Over a year ago

Awesome thanks! So, in vanilla javascript I've seen from different sources the creation of this type of modules (function(){})(). I assume with other solutions you can implement design patterns in similar ways.

Hydrothermal Over a year ago

@sms343 IIFEs ((function() { … })();) can be used with more or less any solution. Their primary purpose is to avoid polluting their parent scope, since all the function's declarations are lexically bound therein. I can edit my answer to use an IIFE if you want.

Collectives™ on Stack Overflow

Javascript Modules and Design Patterns

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related