Question

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

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

course.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（）;”：

上收到错误

未定义学生

当我从学生中删除导入时，我不再收到错误。我曾尝试使用（要求，导入，包含，创建自定义函数，导出），但没有一个对我有效。

有人知道为什么吗？以及如何解决这个问题？

P.S。路径是正确的，它来自VS Code中的自动完成

Answer 1

以下适用于Firefox和Chrome。在Firefox中，它甚至可以在file:///

中使用

模型/ course.js

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

模型/ student.js

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

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

的index.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>

Answer 2

您可以尝试以下操作：

//------ 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 modules

Answer 3

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

如果您将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上的服务器，该服务器应指向您的文件。

Answer 4

//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

Answer 5

快速浏览MDN我认为您可能需要在文件名末尾包含.js，以便导入读取 import './course.js'代替import './course'

价： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

从另一个js文件导入函数。使用Javascript

5 个答案: