jquery - Javascript Module Usage -

i'm getting started javascript modules , want make sure i'm doing correctly.

below example of methodology i'm following, based on "loose augmentation pattern" read here

    //myapp.js     var myapp = {};       //somemodule1.js     (function (ma) {         ma.somemodule1.dostuff = function () {             alert("hi");         };         return ma;     }(myapp || {}));       //somemodule2.js     (function (ma) {         ma.somemodule2.domorestuff = function () {             alert("ho");         };         return ma;     }(myapp || {}));       //somemodule3.js     myapp.somemodule1.dostuff();     myapp.somemodule2.domorestuff(); 

the myapp variable within myapp.js variable that's globally exposed, of other modules , functions being accessible via variable.

somemodule3.js isn't module, arbitrary javascript wanting access properties of myapp object (after appropriate modules have been defined).

the part in particular i'm not 100% clear on this: (myapp || {}, jquery) part called , doing (i know whole thing closure, don't understand how last part working)? seems "ma" nothing, add function in body of closure, return ma. @ point myapp has 1 function.

in bit @ end (myapp || {}), saying "ma isn't nothing, it's called myapp , i'll append functions object if exists."

is right or way off?

i see 4 issues:

1. your code won't run is. have define .somemodule1 before can assign it.

2. there's no reason return ma because aren't using return value.

3. there's no reason pass myapp || {} because if myapp not defined, code nothing because object created not capture in variable , garbage collected , not accessible.

4. as you've shown code, iife you've enclosed code in not accomplishing other adding lines of code , complexity.

here's more detail on each issue.

your modules won't run is. need define .somemodule1 changing , there no reason in code pass myapp || {}:

//somemodule1.js (function (ma) {     ma.somemodule1.dostuff = function () {         alert("hi");     };     return ma; }(myapp || {})); 

to this:

//somemodule1.js (function (ma) {     // must define .somemodule1 before can assign properties     ma.somemodule1 = {};     ma.somemodule1.dostuff = function () {         alert("hi");     };     return ma; }(myapp)); 

there no reason return ma in code since not using return value.

the reason myapp || {} of no value here because if myapp not defined, none of code in module useful because underlying object assigning things not captured in variable anywhere. so, if myapp not defined, code accomplishes nothing. so, definitino, myapp has defined code useful, therefore, can pass myapp iife.

---

as you've shown code, there no benefit or reason putting assignment of properties inside iife. don't have closure variables or private inside iife. so, achieve same result this:

myapp.somemodule1 = {}; myapp.somemodule1.dostuff = function () {     alert("hi"); }; 

there reasons using iife, don't show in code example. i'm fan of using simplest code achieves objectives , not adding complexity sake of it. other people put code inside these iife modules. put code inside iife when there reason have code in iife.