javascript - 如何将一个javascript中定义的函数调用到另一个javascript文件中?

标签 javascript es6-modules

我正在尝试将 javascript 文件中声明的一个函数导入到另一个 javascript 文件中,但无法正确执行。我没有使用任何转译器。

我正在尝试将变量和函数从一个 JavaScript 文件导入到另一个文件,但不想使用转换器。我无法正确理解如何导入和导出函数。我使用 Adobe{Brackets} 作为我的 IDE。

我已经将导入脚本转换为模块,但我仍然是 无法导出或导入。作为第二次尝试,我尝试转换导出脚本 到模块但仍然收到以下错误:

Parsing Error- Export and import keyword are reserved.

作为第三次尝试,我将这两个文件都转换为模块。但还是不行。

HTML:

<html>
<head><title>Test1</title>
</head>
<body>
<button type = "button" class= "slctbtn" onclick= "select()" id= "selct_btn">Select</button>
</body>
<script src="javascript/select.js"></script>
<script type="module" src="javascript/Test.js"></script>
</html>

javascript/Test.js:

var today = 28;
export {today};

javascript/select.js:

import {today} from "./javascript/Test.js";
function select(){
    var month = "august";
    var year = "2019";
    alert("this is " + month + " of the year " + year + " and today is " + today + " day.");
}

预期结果: Alert must show text like this image

最佳答案

你不能真正混合搭配module和非模块 JS。所以:

  • 仅使用一个 <script>元素
    • 做到 type="module"
    • 加载select.js有了它
  • 使用import {today} from "./Test.js";因为路径是相对于JS的
  • 由于模块中的变量不是全局变量,因此使用 addEventListener里面select.js并且不是onclick属性。

关于javascript - 如何将一个javascript中定义的函数调用到另一个javascript文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57699164/

相关文章:

javascript - 如何在 React + Material-UI 元素中使用 CSS?

javascript - 在JavaScript中,有没有比alert()更合适的弹出信息的函数?

ecmascript-6 - 带有 ES6 模块的 babel-jest

javascript - d3 async wait fetch.json 不是函数

javascript - Highcharts X 轴作为文本

javascript - 如何让 ES6/2015 导入/模块在浏览器中工作?

javascript - 使用递归函数时如何避免模块之间的循环依赖?

javascript - 使用 ES6 和 Axios 从全局函数提供数组对象时出现的问题

javascript - ExtJS 4 - 如何使用 Ajax 下载文件?

javascript - 如何避免将 JavaScript ES6 模块导出添加到全局范围以用于普通脚本 block ?