javascript - How to call/use this module in other JS files/modules -

i read js module design patterns recently. came across small code snippet below.

(function(window) {     var module = {         data: "i'm happy now!"     };      window.module = module; })(window); 

still not quite understand code well, questions are:

• how use/call module outside particluar js file? need assign variable module? e.g. var module1 = (...)(...);
• could explain window parameter here stands for?
• is practice have two/three such kind of modules in same file?

the main reason create anonymous function in case prevent global object pollution. it's not module pattern.

the problem arise when declare variable. without function scope, variable added global object (window). if declare variables within function. add variable function scope without polluting global object window.

what happen javascript file add variable named foo , on different file use variable named foo too. unless want have variable shared 2 javascript files, create conflicts , bug difficult fix.

for example: a.js

var foo = "one" 

b.js

var foo = "two" 

c.js

alert(foo) 

in case, alert box might show either "one" or "two", depending of order in javascript files included.

but having a.js:

(function () {     var foo = "one" })() 

b.js

(function () {     var foo = "two" })() 

c.js

(function () {     alert(foo) })() 

this create error cannot alert non declared variable.

one way detect undefined variables, make sure execute javascript code in strict mode.

to that, add string "use strict" @ top of file or function.

function () {   "use strict"   ... } 

undeclared variable raise errors , should possible fix code way.

also, if forget declare variable var keyword, might end adding variable global scope if code scoped function. way prevent global scope pollution run code in strict mode.

in code snippet provided, module name module explicitly added window object. can access window object place in javascript unless window name ghosted other variable.

now, modules. if want define modules, can done in many ways. exemple, create object on window object called modules. in object, you'll insert modules.

module.js

window.modules = {} 

foo.js

(function (window) {   var module = {}   ...   window.modules.foo = module })(window) 

this variant isn't super have manually add module modules object. have manually modify window object, , can subject errors.

modules.js

window.modules = {}  function define(name, constructor) {   var module = {exports: {}}   constructor(module)   window.modules[name] = module.exports }  function require(name) {   return window.modules[name] } 

foo.js

define("foo", function (module) {   module.exports.one = function () {     return 1   }    module.exports.plus = function (a, b) {     return + b   } }) 

bar.js

define("bar", function (module) {   module.exports = function () {     var foo = require("foo")     return foo.plus(foo.one(), foo.one())   } }) 

this module definition looks bit module defined http://requirejs.org/. quite basic doesn't take account module dependencies if bar loaded , used before foo. require method won't able return module.

also, if want store modules without having them visible global scope, can define require , define method on window object , hide modules anonymous scope this:

  (function (window) {     var modules = {}      function define(name, constructor) {       var module = {exports: {}}       constructor(module)       modules[name] = module.exports     }      function require(name) {       return modules[name]     }      window.define = define     window.require = require   })(window) 

this way, define , require function can give access modules. other modules won't able modify other modules without requiring them first. can useful when using third parties script conflict module system.