1
votes

Comment puis-je importer une variable à partir d'un autre fichier JavaScript?

Je souhaite importer un tableau ( imageArray [] ) qui est rempli par un autre fichier JavaScript ( imageUploadDisplay.js ) dans une autre fonction de fichier JavaScript ( postInfoAndImages.js ). Voici ma fonction imageUploadDisplay.js que j'ai essayé d'utiliser.

// In my postInfoAndImages.js
var imageList = [];

$.getScript('imageUploadDisplay.js', function () {
            // Script is now loaded and executed.
            alert("Script loaded, but not necessarily executed.");
            imageList = myImageList(); // Picture array
            console(imageList);
        });

Comme expliqué par d'autres, j'utilise le jQuery suivant pour importer imageUploadDisplay.js code> dans le JavaScript postInfoAndImages.js:

// In my imageUploadDisplay.js

var imageList = [];

function myImageList() {

    return imageList;
}

javascript jquery html

5 commentaires

Vous définissez la même variable dans deux fichiers?

Oui essayait au moins de copier les valeurs d'un tableau à l'autre

Le problème que vous rencontrez n'est pas clair.

Je souhaite accéder au tableau créé et rempli par imageUploadDisplay.js dans une fonction créée dans postInfoAndImages.js

Vous n’importez rien dans postInfoAndImages.js , contrairement à ce que vous pensez. Vous exécutez simplement un morceau de code qui injecte un autre script dans le document lui-même, et pas à postInfoAndImages.js , il devrait donc déjà être consulté globalement, en fonction de ce qui à l'intérieur du script injecté.

3 Réponses :

1
votes

Vous devez travailler avec des exportations et importations .

// postInfoAndImages.js

import imageList from "./imageUploadDisplay"

// -> Do something with imageList

Et puis importez-le dans l'autre fichier

// File imageUploadDisplay.js

let myImageList = () => {
    return imageList;
}

export default imageList

0 commentaires

4
votes

Pour les navigateurs modernes comme Firefox, Chrome, Safari et Opera, utilisez simplement les modules ES6.

Dans votre imageUploadDisplay.js , créez une exportation : p >

<script type="module" src="./path/to/postInfoAndImages.js"></script>

Ensuite, importez simplement la fonction:

// then in postInfoAndImages.js
import { myImageList } from './path/to/imageList.js';

var imageList = myImageList();

Dans votre HTML, vous n'avez plus besoin d'inclure imageUploadDisplay.js (ceci est fait par l'importation au moment de l'exécution).

À la place, incluez le script d'importation avec type="module":

// imageUploadDisplay.js
var imageList = [];

export function myImageList() {
  return imageList;
}

6 commentaires

J'ai un 'Uncaught SyntaxError: un jeton inattendu

Cela se produit si vous oubliez type = "module" .

D'accord, l'erreur a disparu mais il n'y a pas de retour sur mon console.log (imageList) et ma fonction ne s'exécute pas au-delà

Que voulez-vous dire il n'y a pas de retour sur mon console.log (imageList) et ma fonction ne s'exécute pas après ?

J'ai mis le imageList [] initial dans mon imageUploadDisplay.js dans un journal de console et il me montre le nombre de fichiers qu'il contient alors maintenant que je l'ai importé dans postInfoAndImages.js le imageList [] n'affiche rien lorsqu'il est placé dans le journal de la console

ImageUploadDisplay.js fait-il quelque chose de asynchrone?

0
votes

Vous n'avez même pas besoin d'inclure le deuxième fichier dans votre premier pour utiliser la fonction. Si le premier fichier est appelé dans votre code avant le second, vous pouvez simplement vous référer à la fonction.

var imageList[];
imageList = myImageList();

Dans postInfoAndImages.js, appelez simplement la fonction en question:

<script type="text/javascript" src="imageUploadDisplay.js"/>
<script type="text/javascript" src="postInfoAndImages.js"/>

2 commentaires

logiquement cela a du sens mais j'ai un 'UncaughtReferenceError: myImageList is undefined'

Cela devrait fonctionner si vous l'avez référencé correctement. J'ai fait un test rapide. Dans mes premiers js j'ai: var cars = ["Saab", "Acura", "Volvo"]; function myCarList () {voitures de retour; } Un console.log (myCarsList ()) renvoie le tableau ci-dessus. Dans mon deuxième fichier, je l'ai appelé à nouveau mais avec un tableau vide et je récupère le tableau vide. voitures = myCarList (); console.log (voitures);