Every application needs a set of modules that are shared across all other modules. Things like String/Array helpers, Loggers etc are used across your application and it makes sense to create wrappers around them and expose them via a Common Module.
Here is the basic folder structure that we’re going to follow. I’ll explain this in detail below:
The common folder contains the individual common modules like Logger, Modal and Tabs.
- logger.js - may contain code to output/log code either to the Console or to a third party tool like Logentries or Sentry
- modal.js & tabs.js - may contain code to initialise, destroy, center, show, hide modals/tabs
Here is an example of logger.js that can be used to log messages. Note the use of the Singleton Pattern.
Now, assume that we need to share this across different Modules (module-1, module-2, etc). Here is how we can do it:
If we need to share multiple common modules, we can do something like:
As you can see, if you have a lot of common modules, the list can grow really big really fast. It helps to consolidate all these modules into a single Common Module. Something like:
And then, you can just import the Common Module file and use the helper functions using the dot notation. Here is a quick example:
Thanks for taking the time to read this. Build something awesome!