Currently, I am working on a personal project for learning purposes, which is a simple To-Do List. I am implementing the modular pattern (specifically, the revealing module pattern). The image below showcases my general idea of how I intend to build it.
View an image of how my app looks like
Each module will be in a separate JS file where they take the following form:
var TaskModule = (function () {
function someFunction(parameter) {
tasks = newTasks;
}
}
The question arises: what if we want to create a separate file with helper functions? It can be tedious to include repeated code in each module like:
var someElement = document.getElementById('id')
For example, I have a helper function as follows:
var someElement = byId('id');
While creating a HelpersModule in the same way as other modules is a solution, it results in calling functions with a prefixed 'HelpersModule', making them no shorter than the original versions like document.getElementById. To avoid this prefix and ensure simplicity when calling helper functions, I designed my HelpersModule as displayed below:
(function(window) {
window.byId = function (selector, scope) {
return (scope || document).getElementById(selector);
};
})(window);
Although this approach works well, creating the HelpersModule in a non-consistent manner compared to other modules raises the question of whether it is a bad practice or completely acceptable. What are your thoughts on creating modules differently?