web-dev-qa-db-fra.com

Importer des fonctions depuis un autre fichier js. Javascript

J'ai une question sur l'inclusion d'un fichier en javascript. J'ai un exemple très simple: 

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

course.js:

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

Un étudiant a une propriété de cours. comme ça:

import './course';

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

et le index.html est comme: 

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

Mais je reçois une erreur sur la ligne "var x = new Student ();": 

L'élève n'est pas défini

Lorsque je supprime l'importation de Student, je ne reçois plus le message d'erreur ..__J'ai essayé d'utiliser (exiger, importer, inclure, créer une fonction personnalisée, exporter) et aucun ne fonctionnait pour moi.

Quelqu'un sait pourquoi? et comment résoudre ce problème?

P.S. le chemin est correct, il provient de la saisie semi-automatique dans VS Code

javascriptimport
10
Samy Sammour

Ce qui suit fonctionne pour moi dans Firefox et Chrome. Dans Firefox cela fonctionne même à partir de file:///

modèles/course.js

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

modèles/étudiant.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>
9
Chris G

Vous pouvez essayer comme suit:

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

Vous pouvez également importer complètement:

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

Normalement, nous utilisons ./fileName.js pour importer notre propre js file/module et fileName.js est utilisé pour importer le module package/library.

Lorsque vous incluez le fichier main.js sur votre page Web, vous devez définir l'attribut type = "module" comme suit:

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

Pour plus de détails, veuillez vérifier Modules ES6

5
Bablu Ahmed

Par défaut, les scripts ne peuvent pas gérer les importations comme cela directement. Vous obtenez probablement une autre erreur de ne pas pouvoir obtenir le cours ou de ne pas importer.

Si vous ajoutez type="module" à votre balise <script> et modifiez l'importation en ./course.js (car les navigateurs n'ajouteront pas automatiquement la partie .js), le navigateur affichera le cours pour vous et cela fonctionnera probablement.

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>

Si vous servez des fichiers de plus de file://, cela ne fonctionnera probablement pas. Certains IDE ont un moyen d'exécuter un serveur rapide.

Vous pouvez également écrire un serveur express rapide pour servir vos fichiers (installez Node si vous ne l'avez pas):

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

Avec ces deux fichiers, lancez npm install, puis npm start et vous aurez un serveur fonctionnant sur http://localhost:8000 qui devrait pointer sur vos fichiers.

2
samanime