javascript 使用requirejs时访问全局对象

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15448233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 00:47:51  来源:igfitidea点击:

accessing global object when using requirejs

javascriptrequirejsamd

提问by AlexStack

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:

我知道不建议使用全局对象,使用 AMD 背后的整个想法是避免使用全局对象。但是对于一些遗留代码,我必须在全局对象中定义一些东西。目前代码如下所示:

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

It works but hard coding the global object windowdoesn'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:

它可以工作,但是对全局对象进行硬编码window看起来不太好,我很想知道是否可以将其删除。当define()不使用时,代码是这样的:

//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:

我知道,我知道你讨厌这段代码,但让我们进入正题:如何define()在 requirejs的函数内以结构化的方式访问全局变量?我希望有一个隐藏的最后一个参数传递给define()这样的函数:

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

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

或者更简单:this变量将指向该函数内的全局对象。例如:

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

Note:I'm not sure about this last one. Investigating the thisvariable inside the function that is passed to require()says that it is equal to windowwhich 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?

注意:我不确定最后一个。调查this传递给的函数内的变量require()说它等于windowwhich 可以回答我的问题,但我找不到任何提到传递函数正在运行的上下文的文档。也许它毕竟是在全局变量的上下文中运行的?

采纳答案by T.J. Crowder

If you're not in strict mode, you can do this:

如果你不是在严格模式下,你可以这样做:

(function() {
  var global = this;

  define(function(){
    global.x = ...
    global.y = ...
  });
})();

The outer anonymous function that we immediately invoke is invoked with no particular special thisvalue, and so (since this isn't in strict mode), receives the global object as this. (In strict mode, it would receive undefinedinstead.) So we grab thisinto a variable (global) within the anonymous function, and use it from the function you pass into define(which closes over it).

我们立即调用的外部匿名函数是在没有特殊this值的情况下调用的,因此(因为这不是严格模式),将全局对象接收为this。(在严格模式下,它将undefined改为接收。)所以我们在匿名函数中获取this一个变量 ( global),并从您传入的函数define(关闭它)中使用它。

回答by Túbal Martín

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

我建议您创建一个返回window对象的模块。这对于单元测试目的(模拟依赖项)特别有用。

window.js

窗口.js

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

app.js

应用程序.js

define(['window'], function(win) {
  // Manipulate window properties
  win.foo = 1;  
  console.log(win.foo);      
});

回答by harmic

A variation on @TJCrowder's answer, which also works in strict mode:

@TJCrowder 答案的变体,它也适用于严格模式:

(function(global) {
    define(function() {

        global.a="this";
        global.b="that";

    });
})(this);

By calling the immediately invoked function with the argument 'this' (which outside a function is the global scope), then whatever the global scope is it gets passed into the IIF as the argument 'global'.

通过使用参数“this”(函数外部是全局范围)调用立即调用的函数,然后无论全局范围是什么,它都会作为参数“全局”传递到 IIF。

This also avoids hard-coding to the 'window' object, an advantage since that doesn't apply in non-browser environments.

这也避免了对“window”对象的硬编码,这是一个优势,因为这不适用于非浏览器环境。