Javascript

Question

您好！

我是 JavaScript 的新手。请原谅我缺乏JS词汇。

上下文

我有三个文件：

index.html
main.js
sites.js

index.html

<body>
  <h1>JavaScript Testing Zone</h1>
  <script src="/main.js" type="module"></script>
</body>

main.js

import { sitesMod } from "/sites.js";
sitesMod();

console.log(sites);

sites.js

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
}
export { sitesMod };

代码说明

index.html 将运行 main.js 文件。

main.js 将导入运行函数 sitesMod() 来自 sites.js

问题

console.log(sites); 应该输出 https://site1.org/,https://site2.org/,https://site3.org/

相反，console.log(sites); 输出 sites is not defined

我所知道的

我意识到我需要在main.js中声明类似var sites = X的内容，但我不确定如何传输[=19=的内容] 在 sites.js 到 var sites 在 main.js

到目前为止，使用导入和导出模块似乎是对的 direction.I 需要桥接将变量数据从一个文件传输到另一个文件的最后一步。

我希望我能够以一种易于理解的方式描述我的问题。如果我能澄清这个问题，请告诉我。谢谢。

Answer 1

这里有两个问题。 sitesMod 是没有 return 值的函数，因此当您在 main.js 中调用它时，什么也不会发生。将函数更改为：

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
  return sites;
}

第二个问题是您使用函数的方式。仅调用函数不会在函数体之外声明变量 (sites)。要访问 sites 变量，您可以这样做：

import { sitesMod } from "/sites.js";

console.log(sitesMod());

我没有尝试代码。

Answer 2

function sitesMod() 不会 return 任何东西并且运行它不会创建一个名为 sites

的全局变量

一个解决方案是

sites.js

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
  return sites;
}

main.js

import { sitesMod } from "/sites.js";
const sites = sitesMod();

console.log(sites);

但是，由于 sites.js 的琐碎性质 - 我更倾向于简化代码，例如

sites.js

const sites = [
  'https://site1.org/',
  'https://site2.org/',
  'site3.org/'
];

export { sites };

main.js

import { sites } from "/sites.js";
console.log(sites);

Answer 3

兄弟，我注意到你的代码有两个错误：

当您在 .js 和 .html 文件上导入和 link 文件时，您指向的是系统根文件夹（例如 type="/main.js"、import { sitesMod } from "/sites.js"; ).要指向您的文件夹所在的实际文件夹，例如使用 ./main.js 而不仅仅是 /，或者只是删除它，都是一样的；
当你在一个函数中声明一个变量时，它有一个局部作用域并且在执行的最后被删除，所以你不能在作用域之外访问它，所以：

import { sitesMod } from "/sites.js";
sitesMod();

console.log(sites);

错了。相反，有两种方法：

在你的 site.js:

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];

  return sites;
}

在main.js：

import { sitesMod } from "./sites.js";

console.log(sitesMod());

直接在函数中包含一个 console.log() — 第一个更好 ;):

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];

  console.log(sites);
}

export { sitesMod };

提示：查看更多关于作用域和 var、let 和 const 之间的区别以及更多关于 Linux（您将了解 / 和 ./）等等。

希望对你有帮助，好好学习XD

我的英语很烂，所以请原谅我...

Javascript - 将对象从一个 JS 文件传递到另一个 JS 文件

Javascript - Issue passing object from one JS file to another JS file

web-frontend

javascript-objects

javascript-import

es6-modules

您好！

上下文

代码说明

问题

我所知道的

Javascript - 将对象从一个 JS 文件传递​​到另一个 JS 文件

Javascript - Issue passing object from one JS file to another JS file

javascript

web-frontend

javascript-objects

javascript-import

es6-modules

您好！

上下文

代码说明

问题

我所知道的

Javascript - 将对象从一个 JS 文件传递到另一个 JS 文件