module-js

An extendable module class

ModuleJS

ModuleJS is a library that allows you to easily control "modules" on a web site or web page. A module can essentially be anything, but it usually represents an independent unit on a web site or app. (i.e. a modal, or a carousel).

The idea behind this library is to provide a common interface between all the modules you may want to use on your site. Which all means less code, less work, and less things to unit test.

The best way make something a module is to extend the Module class. To do this, you simply use it's extend method. From there, you can override the default abstract methods to add logic that is custom to your module.

The methods that are available are listed below.

When creating a new class that extends the Module class, you can then create instances of it that accept an HTMLelement.

var Modal = Module.extend({
   onLoadfunction () {
       console.log('this will run when the module'load() method is called!');
   }
});
 
// create a new instance
var modalInstance = new Modal({
    el: document.getElementById('modal-container')
});
 
// load the module to print out the loaded message
modalInstance.load();
 

When you extend the Module class, your module will get some useful methods whenever an instance of it is created. The methods include the following:

When you extend the Module class, your module will have a .load() method when an instance of it is created. For instance, to create a modal module that outputs loaded text, you can do the following:

var Modal = Module.extend({
   onLoadfunction () {
       console.log('this will run when the module'load() method is called!');
   }
});
 
// create a new instance
var modalInstance = new Modal();
 
// load the module to print out the loaded message
modalInstance.load();
 

For the following example, we'll use a modal. Assuming there is already an element in the DOM with the id of "modal-container".