Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

accessing global object when using requirejs

I know it's not recommended to use the global object and the whole idea behind using AMD is to avoid using the global object. But for some legacy code, I have to define some stuff in the global object. Currently the code looks like this:

//example2.js
define(function(){
  var globalObject = window;
  globalObject.x = ...
  globalObject.y = ...
});

It works but hard coding the global object window doesn't look very nice and I'm curious to see if it is possible to remove it. When define() was not used, the code looked like this:

//example1.js
x = ...
y = ...

I know, I know you hate this code, but let's be to the point: how can the global variable be accessed in a structured manner inside the define() function in requirejs? I wish there was something like a hidden last parameter to the function that is passed to the define() like this:

//example3.js
define(function(globalObject){
  globalObject.x = ...
  globalObject.y = ...
});

Or even simpler: the this variable would point to the global object inside that function. For example:

//example4.js
define(function(){
  this.x = ...
  this.y = ...
});

Note: I'm not sure about this last one. Investigating the this variable inside the function that is passed to require() says that it is equal to window which can be the answer to my question, but I haven't been able to find any documentation that mentions the context that the passed function is running. Maybe it is running in the context of the global variable after all?

like image 373
AlexStack Avatar asked Mar 16 '13 10:03

AlexStack


People also ask

What are the advantages of RequireJS?

A module in RequireJS is a scoped object and is not available in the global namespace. Hence, global namespace will not be polluted. RequireJS syntax allows to load modules faster without worrying about keeping track of the order of dependencies. You can load multiple versions of the same module in the same page.

How does RequireJS work in Node JS?

RequireJS loads each dependency as a script tag, using head.appendChild (). RequireJS waits for all dependencies to load, figures out the right order in which to call the functions that define the modules, then calls the module definition functions once the dependencies for those functions have been called.

Can I use RequireJS in a server side JavaScript environment?

Note that the dependencies for a given module definition function could be called in any order, due to their sub-dependency relationships and network load order. Using RequireJS in a server-side JavaScript environment that has synchronous loading should be as easy as redefining require.load ().

How to access the properties of the global object?

All properties of the global object can be accessed directly: In a browser, global functions and variables declared with var (not let/const !) become the property of the global object: The same effect have function declarations (statements with function keyword in the main code flow, not function expressions). Please don’t rely on that!


1 Answers

I suggest you to create a module that returns the window object. This is specially useful for unit testing purposes (mocking dependencies).

window.js

define(function(){
   return window;
});

app.js

define(['window'], function(win) {
  // Manipulate window properties
  win.foo = 1;  
  console.log(win.foo);      
});
like image 107
Túbal Martín Avatar answered Sep 20 '22 17:09

Túbal Martín