CODEWITHSUNDEEP
javascript
Water Cooler v2
Water Cooler v2

Reputation: 33850

How may I split my JavaScript classes across multiple files and yet have them belong to the same namespace?

I learnt that you could mimic namespaces in JavaScript by scoping your classes / objects inside a function expression or an object literal. That way the containing object or function provides a namespace and scope for the contained.

But for those to work, all the contained objects have to be within the same file, right?

Because if I had two namespace / naming container objects with the same name in two different files, they would overwrite each other depending on the order in which I included the source files.

File1.js

var Automtomobiles = 
{
  function Wheel() { ... }
};

File2.js

var Automtomobiles = 
{
  function Car() { ... }
};

How do I span objects / class definitions across multiple files but keep them within a same namespace?

Upvotes: 0

Views: 1084

Answers (3)

christiansr85
christiansr85

Reputation: 877

Using pure javascript you could use the common notation that lot of libraries use. For one file:

var Automtomobiles;
(function (Automtomobiles) {
    var Wheel = (function () {
        function Wheel() {};        
        return Wheel;
    }());
    Automtomobiles.Wheel = Wheel;
})(Automtomobiles || (Automtomobiles = {}));

And the other file:

var Automtomobiles;
(function (Automtomobiles) {
    var Car= (function () {
        function Car() {};      
        return Car;
    }());
    Automtomobiles.Car= Car;
})(Automtomobiles || (Automtomobiles = {}));

Anyway, if you are open to use third party libraries, they could help you too. Long time ago I used Dojo declare feature, which manages the namespaces and class names for you, althoug I'm sure that at current exists more libraries to reach that.

In fact, you also could use Typescript, which is perfect to reach your goal and vey use to learn. The code generated by Typescript looks like the examples I posted above.

Upvotes: 0

mike510a
mike510a

Reputation: 2168

To make them global you can use window.Automtobiles = function() or to define an static property to a type. You can use .prototype

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

console.log(new Person("john", "smith", 20, "red"));

Note how "English" is attached to each instance of Person after using the Prototype function

For your particular case, you can define Automtobiles then prototype it..

function Automtomobiles() {

};

Automtomobiles.prototype.wheel = function() { ... }
Automtomobiles.prototype.car = function() { ... }

Upvotes: 1

Kiran Shinde
Kiran Shinde

Reputation: 5982

Make Automtomobiles as global object

File1.js

var Automtomobiles = Automtomobiles || {};
Automtomobiles.wheel = function() {
}

File2.js

var Automtomobiles = Automtomobiles || {};
Automtomobiles.car = function() {
}

Upvotes: 4

Related Questions