Question

我对Javascript中的范围以及如何识别全局函数感到困惑。在我的页面上我有

<script src="base64.js"></script>

定义。然后在另一个文件中，我有

var xhr = new XMLHttpRequest;
...
        var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
            alert(Base64.decode("abc"));
        xhr.open("get", full + "myotherfile.js", true);
        xhr.send()

警报执行没有问题。但是在＆＃34; mytoherfile.js＆＃34;对Base64类的引用会导致RerefernceError。所以在myotherfile.js的顶部我试过

import {Base64} from 'base64';

但这会导致＆＃34;未捕获的SyntaxError：意外的令牌{＆＃34;错误。什么是正确的方法来包含在通过AJAX加载的JS文件中识别我的全局函数？

编辑：使用

加载远程加载的JS文件

this.worker = new Worker(xhrResponseText);

Answer 1

主页中加载的脚本在Web worker中不可用，您必须使用importScripts导入它们而不是导入命令

importScripts("base64.js");

Answer 2

在老式（非模块）javascript文件中，隐含在窗口上进行全局变量。因此，在第一个示例中，Base64.decode("abc")与window.Base64.decode("abc")相同。然而，在模块中，情况并非如此。如果要在窗口上访问全局变量，则必须明确地完成。

在模块中，尝试将对Base64的引用更改为window.Base64。

旁注：如果base64.js文件使用基本脚本标记导入，那么将它作为es6模块导入它将不起作用（import {Base64} from 'base64';）。您可以阅读有关如何导入模块here的更多信息！

希望有所帮助！

更新

为清楚起见，这里有几个例子。基本上，你必须从正在导入的脚本中导出花括号（{ Base64}）中的内容，而不是放在窗口上。

<script src=".../base64.js"></script>

<script>
  // both are accessible this way because this is NOT a module
  // and global variables are assumed to be on the window.
  console.log(Base64);
  console.log(window.Base64);
</script>

<script type="module">
  // Will not work:
  // import { Base64 } from ".../base64.js
  // import { window.Base64 } from ".../base64.js

  // The same as importing view the script tag
  // (not needed because the script tag already imported it)
  // import ".../base64.js"

  // the "global variable" is accessible on the window
  console.log(window.Base64)
</script>

Answer 3

问题在于您所指的路径。以下是类型模块中的有效路径。

// Supported:
import {foo} from 'https://jakearchibald.com/utils/bar.js';
import {foo} from '/utils/bar.js';
import {foo} from './bar.js';
import {foo} from '../bar.js';

// Not supported:
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';

尝试直接参考路径。像这样的东西

import {addTextToBody} from '../../someFolder/someOtherfolder/utils.js';

这里是有效的pathName

Starts with ./  :- same folder
Starts with ../ :- Parent folder
Starts with ../../ :- above parentfolder

如何获得通过AJAX加载的JS文件识别的全局函数？

3 个答案:

更新