Using nested classes to simulate namespaces in ES6

Question

I have a file, Services.js which I am trying to load all of my individual services in. These are exposed as singletons.

Services.js

var Services = { };

export default Services;

I then want Sample Service nested under Services, so I could invoke for example Services.Sample.Operation()

`SampleService.js'

import Services from './Services';

Services.Sample = {

    Operation: function() {
        alert('operation!') 
    }
};

export default Services.Sample;

Then, I try and import:

import Services from './services/Services';
import SampleService from './services/SampleService';

alert(Services);         // yields '[object object]'
alert(SampleService);    // yields '[object object]'
alert(Services.Sample);  // yields 'undefined' <--- This is the one I actually want to use

How can I get it so I can refer to Services.Sample rather tan SampleService. How can I make SampleService become nested under Services?

Answer 1

Your way doesn't work because you're importing Services.js in SampleService.js , but the Services variable is not the 'original' Services variable from Services.js .

What I'd do is something like this:

SampleService.js :

SampleService = {

    Operation: function() {
        alert('operation!') 
    }
};

export default SampleService;

Services.js :

import SampleService from './SampleService';

var Services = { };
Services.Sample = SampleService;

export default Services;

and then:

import Services from './services/Services';

alert(Services);         
alert(Services.Sample);

export default Services;

This does also seem to make more sense to me regarding basic (in)dependencies and consistency of your modules (define what Services can do in Services.js not SampleService.js , SampleService could be independent of Services , the module loading Services.js should not depend on SampleService.js as well as that might change later, ...).