当前位置：文江博客话题详情

Javascript - 将对象从一个 JS 文件传递到另一个 JS 文件时出现问题

发布于 2025-01-11 20:15:20 字数 1477 浏览 0 评论 0原文

你好！

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

上下文

我有三个文件：

index.html
main.js
site.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 将从 sites.js

Problem

控制台导入并运行函数 sitesMod()。 log(sites); 应输出

https://site1.org/,https://site2.org/,https://site3.org/，console .log(sites); 输出 sites 不是定义

我所知道的

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

到目前为止，使用导入和导出模块似乎带我走向正确的方向。我需要桥接传输变量数据的最后一步从一个文件到另一个文件。

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

原文

Hello!

I am new to JavaScript. Please forgive my lack of JS vocabulary.

Context

I have three files:

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 };

Explanation of code

index.html will run the main.js file.

main.js will import and run the function sitesMod() from sites.js

Problem

console.log(sites); should output https://site1.org/,https://site2.org/,https://site3.org/

instead, console.log(sites); outputs sites is not defined

What I know

I realize that I need to declare something like var sites = X in main.js, but I am unsure how to transfer the content of var sites on sites.js to var sites on main.js

So far using the import and export modules seem to be taking me in the right direction.I need to bridge the final step of transferring the variable's data from one file to another.

I hope I was able to describe my problem in an intelligible way. Please let me know if I can clarify the question. Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北方的韩爷 2025-01-18 20:15:20

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

当您导入并链接 .js 和 .html 文件上的文件时，您指向系统根文件夹（例如，type="/main.js"，从“/sites.js”导入{sitesMod}）。例如，要指向文件夹所在的实际文件夹，请使用 ./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

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

Bro, i've noted two mistakes on your code:

When you import and link your file on your .js and .html files you are pointing to the system root folder (eg. type="/main.js", import { sitesMod } from "/sites.js";). To point to the actual folder where are your folder use ./main.js for example and not just /, or just remove it, are the same;
When you declare a variable inside a function it have a local scope and at the final of the execution is deleted, so you can not acess it outside of the scope, so:

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

console.log(sites);

Are wrong. Instead there are two ways:

At your site.js:

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

  return sites;
}

At main.js:

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

console.log(sitesMod());

Include a console.log() directly inside the function — the first is better ;):

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

  console.log(sites);
}

export { sitesMod };

Tip: see more about scope and the difference between var, let and const and also more about Linux (you will understanding the / and ./) and a such more.

I hope it helped you, good studies XD

My english is a sucks, so forgive me for something...

回复收藏 0 原文

番薯 2025-01-18 20:15:20

这里有两个问题。 sitesMod 是没有返回值的函数，因此当您在 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());

我没有尝试该代码。

There are two issues here. sitesMod is function with no return value so when you call it in main.js nothing happens. Change the function to:

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

Second issue is with the way you're using the function. Just calling the function doesn't declare a variable (sites) outside the body of the function. To access the sites variable you can do this:

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

console.log(sitesMod());

I didn't try the code.

回复收藏 0 原文

独留℉清风醉 2025-01-18 20:15:20

functionsitesMod() 不会返回任何内容，并且运行它不会创建名为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);

function sitesMod() doesn't return anything and running it does not create a global variable called sites

One solution is

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);

However, due to the trivial nature of sites.js - I'd be more inclined to simplify the code like

sites.js

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

export { sites };

main.js

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

回复收藏 0 原文

~没有更多了~

关于作者

回忆那么伤

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

Javascript - 将对象从一个 JS 文件传递到另一个 JS 文件时出现问题

你好！

上下文

代码说明

Problem

我所知道的

Hello!

Context

Explanation of code

Problem

What I know

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

Javascript - 将对象从一个 JS 文件传递​​到另一个 JS 文件时出现问题

你好！

上下文

代码说明

Problem

我所知道的

Hello!

Context

Explanation of code

Problem

What I know

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

Javascript - 将对象从一个 JS 文件传递到另一个 JS 文件时出现问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。