Javascript module pattern import

Question

I am trying to understand Javascript module patter, but I can't figure out the difference between parameters added to the anonymous function and parameters added at the end. So can someone please help me understand the difference between both? Thanks

Below is a module pattern example which implement both anon. function parameters (JQ, Yahoo) and module parameters shown at the end (JQuery, Yahoo).

var modularpattern = (function(JQ, Yahoo) {
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}(JQuery, Yahoo));

Can you show us an example of the module pattern added to an anonymous function? — soktinpk, Aug 31 '14 at 12:09
They are the same, but this way you can create aliases without polluting the outer scope. — Oriol, Aug 31 '14 at 12:13
There is no such thing as a "module parameter". They're simply *arguments* of a *function call* - [understand IEFE](http://stackoverflow.com/q/8228281/1048572) — Bergi, Aug 31 '14 at 12:19

score 1 · Answer 1 · answered Aug 31 '14 at 12:13

I can't figure out the difference between parameters added to the anonymous function and parameters added at the end

The parameters added to the anonymous function are the names you're giving to these things inside your function
The parameters added at the end are the references to these objects

This means you can access a "safe(r)" reference, as it's less easily changed by other pieces of code

(function (bar) {
    // use bar here, not foo as it's your protected reference
    // but unless something else happens, bar === foo
}(foo);

Code using this pattern is good for several reasons

Keeps the namespace clean
If frameworks contain conflicts, gives you an "safe" environment to work in where you can use the default names

So bar is like a local var which is limited to the anon func scope, while foo is like a global variable which tell the compiler to pass foo library to this module correct? — MChan, Aug 31 '14 at 17:08

score 1 · Accepted Answer · answered Aug 31 '14 at 12:31

1

Logically your codes is equal to:

var func = function(JQ, Yahoo) { // Section 1
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}

var modularpattern = func(JQuery, Yahoo);  // Section 2

So in section 1

JQ : A function local variable which is used as input argument
Yahoo : Exactly same as JQ

And in section 2 (In this section actually you invoke the function )

JQuery : An existing object in the global scope
Yahoo : Exactly same as JQuery

Why do developers implement like this:

All global objects is accessible inside function scopes but accessing to local variables is much faster than global variables. (This is called Localization)

answered Aug 31 '14 at 12:31

frogatto

28,539
11
83
129

So 'JQ' here is like a local variable limited to the module function scope but is not accessible from the Global scope, while JQuery is a global variable which is accessible from global scope? Also what will happen if I want to pass JQuery library to this module but entered JQ again instead of JQuery? At this point the compiler won't understand that I need to pass JQuery library right? – MChan Aug 31 '14 at 16:59
@MChan first question:you're perfectly correct. Second question: because `JQ` is not defined in the global scope so you'll get `undefined` in that function (in other words `JQ` in that function will be `undefined`) third question: yes **Note** JavaScript does not have [compiler it has interpreter](http://www.engineersgarage.com/contribution/difference-between-compiler-and-interpreter) – frogatto Aug 31 '14 at 18:54

score 0 · Answer 3 · answered Aug 31 '14 at 12:36

0

I had work with many realizations of Module Pattern, but this one is the best way:

(function(global) {
    var somePrivate = 'foo';

    function somePrivateMethod() {}

    var myModule = function() {
        // Your logic here
    }

    global.myModule = myModule;
})(this);

answered Aug 31 '14 at 12:36

Eugene Obrezkov

2,910
2
17
34

What is the difference between global and this above? Shouldn't those refer to libraries being imported? – MChan Aug 31 '14 at 17:00

Javascript module pattern import

3 Answers3