Javascript: Declaring functions to be used globally using modules

Question

I'm looking for a way to have a common.js, if you will, containing some functions to be used in other js scripts further down the hierarchy.

Usually I do this, simply by declaring a function like so: function x(){...} to be called later on from some other js. However I ran in to some trouble with this approach when I tried to parse and mash all my .js files with Uglifyjs. After some research I've learned some advantages with the use of javascript modules to solve my uglify problem as well as strive towards best practice.

I found a pretty neat solution using modules here: Javascript : Best way to declare functions to be used globally?

The code fitted to my needs:

The modules section isn't properly defined ... here's a slightly tidied up example.

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(x,y){
        var someFunction = function(){ alert(xy); };

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); };

        return { 
            init: someFunction
        };
    }());

    return { 
        init: function(key){
        modules[key].init();
        }
    };
}(jQuery, this, document));

$(window.MainModule.init['alerter']);

The problem I need help with is that I want to init module['alerter'] and provide the arguments to the function

modules["alerter"] = (function(x,y){
    var someFunction = function(){ alert(xy); };            
    return { 
        init: someFunction
    };
}());

by the use of$(window.MainModule.init['alerter']).

I've tried to be specific in an area thats rather new to me. Of course I'm grateful for your help.

do you have any browser compatible requirement or do you use any thing like "babel" to support es6? — jilykate, Jun 28 '18 at 07:49
Best case scenario the code should be compatible as broad as possible ie latest versions of chrome, firefox, safari, ie. Not using any tools like babel on this project — , Jun 28 '18 at 07:58

score 0 · Answer 1 · answered Jun 28 '18 at 08:10

If your project support es6, you can have a "mainModule.js" have the following content:

const alerter = function(x,y) {alert(x,y);};
const alerter2 = function() {alert('I alert second');};
export default {
  alerter,
  alerter2
}

And in the file you need to use alerter or alerter2, you just:

import {alerter, alerter2} from 'path/to/mainModule.js';
alerter(param1, param2); 
alerter2();

Since you have this "init" method, I guess you want to create to classes "aleter" and "aleter2". You can also use javascript class to make it work. https://caniuse.com/#search=Class

Thank you for good answer. I've been looking into tools like "babel" (as mentioned in comments) to make the project es6 compatible . — , Jun 29 '18 at 05:21

score 0 · Answer 2 · answered Jun 28 '18 at 08:44

why don't you do the following:

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(){
        var someFunction = function(x,y){ alert(x+y); return this;};

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); return this;};

        return { 
            init: someFunction
        };
    }());

    return { 
        module: function(key){
          return modules[key];
        }
    };
}(jQuery, this, document));

then you can call it that simple way:

window.MainModule.module('alerter').init(1,2).init(2,3).init(3,4); 
window.MainModule.module('alerter2').init().init();

score 0 · Accepted Answer · 2018-06-29T08:43:41.483

0

I ended up implementing 'babel' with minify to support es6 and to solve:ish problem with parse/mash of .js files. Thank you for good answers :)

edited Jun 29 '18 at 08:43

answered Jun 29 '18 at 07:50

Javascript: Declaring functions to be used globally using modules

3 Answers3