Guide: ES Modules Part 2: Class skeleton

Entry point

Our index.js file is what's known as our 'entry point'. This is a single file we can load into the browser when our pages are loaded that can deal with checking what needs to be done, and making it happen.

On small sites, you might only ever need one. Indeed, even on bigger sites you may only ever need one, but sometimes it might make sense to have a global entry file that handles things that appear on every single page (like mobile navigation, site settings menus, or similar) and to have other template-specific entry point files that do things used only in certain areas.

In our case, we just need the one. And from this file, we'll pull in our MobileNav JavaScript class and initialise it ready for use.

JavaScript class skeleton

First we're going to need to create our MobileNav class. Over the time I've been writing classes, I've fallen into having a general skeleton framework I tend to use for just about every new class I write.

Every class needs a constructor where we can pass in a bunch of arguments and then we just need to get it to do some 'stuff'.

export default class MySexyJsClass {
    constructor (arg1) {
        this.arg1 = arg1;
    }

    init () {
        console.log('MySexyJsClass: init.');

        /* Do some stuff here */
    }
}

This doesn't allow us to account for being badly initialised, or trying to intialise it in a place where trying to run it when it shouldn't could cause a console error. To be sensible, we can just check if the right aruments are valid before we try to initialise, and exit a bit more gracefully.

export default class MySexyJsClass {
    constructor (arg1) {
        if (!arg1) {
            console.log('MySexyJsClass. Exiting constructor. arg1:', arg1);

            return;
        }

        this.arg1 = arg1;
    }

    init () {
        console.log('MySexyJsClass: init.');

        /* Do some stuff here */
    }
}

Sometimes I'll need to run the constructor and have the class auto-initialise and do stuff. To do this, you can just run the init() function from the end of the constructor(), like so:

export default class MySexyJsClass {
    constructor (arg1) {
        if (!arg1) {
            console.log('MySexyJsClass. Exiting constructor. arg1:', arg1);
            
            return;
        }

        this.arg1 = arg1;

        this.init();
    }
}

So now we've got a basic skeleton for a class that will auto-initialise if the right arguments are passed in. So how do we use it in our entry file? Easy, we just import it.

import MySexyJsClass from './MySexyJsClass.js';

This still doesn't do much, but now we can actually create an instance of the class and we can get it to run.

const mySexyJsClass = new MySexyJsClass();

We just create a variable and tell it to make a new instance of the MySexyJsClass as the name mySexyJsClass. The name of the variable can be whatever you want, but if I'm only likely to use a single instance of a class, I'll generally opt in calling the variable the same as the class but camelCase instead of PascalCase.

Now, since our class is expecting at least one argument to be passed in for it to do anything - arg1 - if we try to run this in our browser now, we're going to get a console message telling us that arg1 is undefined and that the constructor is exiting, just like we want it to.

Let's update our entry file and get our class to the init() function at least.

const mySexyJsClass = new MySexyJsClass(true);

Check in your browser's dev tools and the console should now output 'MySexyJsClass: init.' - Perfect! Your class is being imported, initialised and is running just as expected.