Импорт функций из другого js файла. Javascript

У меня есть вопрос о включении файла в 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();":

Студент не определен

Когда я удаляю импорт из Student, я больше не получаю эту ошибку. Я попытался использовать (require, import, include, создать пользовательскую функцию, экспортировать), и никто не работал для меня.

Кто-нибудь знает почему? и как это исправить?

PS путь правильный, он исходит из автозаполнения в VS Code

Ответы

Ответ 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>

Ответ 2

По умолчанию скрипты не могут напрямую обрабатывать импорт. Вероятно, вы получаете еще одну ошибку: не получить курс или не импортировать.

Если вы добавите 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 сервер для обслуживания ваших файлов (установите узел, если у вас его нет):

//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 который должен указывать на ваши файлы.

Ответ 3

Вы можете попробовать следующее:

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

Ответ 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