从另一个 js 文件导入函数

我有一个关于在 javascript 中包含文件的问题。 我有一个非常简单的例子:

--> index.html
--> models
--> course.js
--> student.js

当然:

function Course() {
this.id = '';
this.name = '';
}

一个学生有一个课程属性，如下:

import './course';


function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
}

而 index.html 是这样的:

<html>
<head>
<script src="./models/student.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
window.onload= function() {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
</body>
</html>

但是我在“ var x = new Student () ;”这行得到了一个错误:

学生没有定义

当我从 Student 中删除导入时，就不会再收到错误。 我尝试过使用(请求、导入、包含、创建自定义函数、导出) ，但没有一个对我有用。

有人知道为什么吗，怎么解决？

附注: 路径是正确的，它来自 VS 代码中的自动补全

256559 次浏览
小开

默认情况下，脚本不能直接处理这样的导入。您可能会得到另一个关于无法获取 Course 或不执行导入的错误。

如果将 type="module"添加到 <script>标记中，并将导入更改为 ./course.js(因为浏览器不会自动将。Js 部分) ，然后浏览器会为你下拉路线，它可能会工作。

import './course.js';


function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
}

<html>
<head>
<script src="./models/student.js" type="module"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
window.onload= function() {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
</body>
</html>

如果你是通过 file://提供文件服务，它可能不会工作。一些 IDE 有一种方法来运行一个快速服务器。

您还可以编写一个快速 express服务器来服务您的文件(如果没有 Node，请安装它) :

//package.json
{
"scripts": { "start": "node server" },
"dependencies": { "express": "latest" }
}


// server/index.js
const express = require('express');
const app = express();


app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');
app.listen(8000);

对于这两个文件，运行 npm install，然后运行 npm start，您将有一个运行在 http://localhost:8000上的服务器，它应该指向您的文件。

小开
最佳答案

下面的代码在 Firefox 和 Chrome 中都可以使用，甚至可以在 file:///中使用

Model/course. js

export function Course() {
this.id = '';
this.name = '';
};

Model/Student. js

import { Course } from './course.js';


export function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
};

Html

<div id="myDiv">
</div>
<script type="module">
import { Student } from './models/student.js';


window.onload = function () {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
小开

你可以试试以下方法:

//------ js/functions.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}


//------ js/main.js ------
import { square, diag } from './functions.js';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

您也可以完全导入:

//------ js/main.js ------
import * as lib from './functions.js';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

通常我们使用 ./fileName.js来导入自己的 js file/module，而使用 fileName.js来导入 package/library模块

当您将 main.js 文件包含到您的网页中时，您必须将 type = “ module”属性设置如下:

<script type="module" src="js/main.js"></script>

详情请查询 ES6模块

小开 
//In module.js add below code


export function multiply() {
return 2 * 3;
}

//使用 calc.js 中的模块

import { multiply } from './modules.js';


const result = multiply();


console.log(`Result: ${result}`);

//Module.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Module</title>
</head>
<body>


<script type="module" src="./calc.js"></script>
</body>
</html>

它的一个设计模式相同的代码可以在下面找到，请使用一个活的服务器来测试它，否则你会得到 CORS 错误

Https://github.com/rohan12patil/jsdesignpatterns/tree/master/structural%20patterns/module


提交答案