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
– soktinpk, Commented Aug 31, 2014 at 12:09
They are the same, but this way you can create aliases without polluting the outer scope. — Oriol
– Oriol, Commented Aug 31, 2014 at 12:13
There is no such thing as a "module parameter". They're simply arguments of a function call - understand IEFE — Bergi
– Bergi, Commented Aug 31, 2014 at 12:19

frogatto · Accepted Answer · 2014-08-31 12:31:27Z

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, 2014 at 12:31

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MChan Over a year ago

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?

frogatto Over a year ago

@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

Paul S. · Accepted Answer · 2014-08-31 12:13:49Z

1

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

answered Aug 31, 2014 at 12:13

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

1 Comment

MChan Over a year ago

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?

Eugene Obrezkov · Accepted Answer · 2014-08-31 12:36:07Z

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, 2014 at 12:36

Eugene Obrezkov

2,9962 gold badges19 silver badges35 bronze badges

1 Comment

MChan Over a year ago

What is the difference between global and this above? Shouldn't those refer to libraries being imported?

Collectives™ on Stack Overflow

Javascript module pattern import

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related