Importowanie klasy z innego pliku

0

Witam.
Mam problem i nie mam pojęcia jak go rozwiązać ( szperam po necie już chyba od godziny i nic).
Sprawa teoretycznie banalna... mam dwa pliki (z DivFactory.js chce importować klasę do script.js) :

DivFactory.js

export default class divFact {
   constructor(type, className) {
      this.numberOfElements = type;
      this.className = className;
   }
   makeElemet() {
      // {...}
   }
}

script.js

import divFact from "./DivFactory.js";

document.addEventListener('DOMContentLoaded', function () {
   const instDivFact = new divFact('div', 'md-class');
   const newEl = instDivFact.makeElemet();
   console.log(newEl);
})

W debugerze w Chromie pojawia się błąd: Uncaught SyntaxError: Unexpected identifier script.js:1
a w Firefox: SyntaxError: import declarations may only appear at top level of a module (oczywiście import jest w linii nr 1).
Nie mam pojęcia o co chodzi bo wszędzie jest opisane to tak jak zrobiłem i wszędzie niby extra działa i żadnych problemów z tym nikt nie ma.
Proszę o pomoc.

Pozdrawiam.

0

import nie działa tak o se w dowolnym pliku JS - musisz wykorzystać np. webpacka.

Edit: zdaje się, że jednak już można :-P http://www.mariadcampbell.com/2018/07/11/implementing-es6-modules-without-webpack-or-babel/

0

https://stackoverflow.com/questions/37624819/es2015-import-doesnt-work-even-at-top-level-in-firefox (na przyszłość - wystarczy treść błędu wyszukać w Google)
https://caniuse.com/#feat=es6-module

Nie używaj import po stronie przeglądarki chyba, że robisz coś tylko dla siebie.

0
Markuz napisał(a):

https://stackoverflow.com/questions/37624819/es2015-import-doesnt-work-even-at-top-level-in-firefox (na przyszłość - wystarczy treść błędu wyszukać w Google)
https://caniuse.com/#feat=es6-module

Nie używaj import po stronie przeglądarki chyba, że robisz coś tylko dla siebie.

Widziałem to i zastosowałem tylko problem pojawił się nowy... niżej miałem dynamicznie wstawiane dwa obrazki i użyciu type=module w index.html, obrazki się nie ładowały :)

0

Nie rozumiem, co mają obrazki do skryptów? Działa już czy nie? Pokaż kod.

0

Proszę bardzo:

index.html

<!doctype html>
<html lang="pl">

<head>
    <meta charset="utf-8">
    <title>TODO</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module" src="js/script.js" ></script>
</head>

<body>

    <div class="container">
        
    </div>

</body>
</html>

script.js

import divFact from "DivFactory.js";

document.addEventListener('DOMContentLoaded', function () {
   const main = document.querySelector('.container');
   
   const instclass = new divFact('div', 'md-class');
   const newEl = instclass.makeElemet();
   console.log(newEl);

   img = new Image(200, 200);
   img.src = 'content/jpgOn.png';
   main.appendChild(img);

   img.addEventListener('mouseenter', (e) => {
      e.target.src = 'content/jpgOf.png';
   })
   img.addEventListener('mouseleave', (e) => {
      e.target.src = 'content/jpgOn.png';
   })
})

DivFactory.js

export default class  {
   constructor(type, className) {
      this.numberOfElements = type;
      this.className = className;
   }
   makeElemet() {
      const element = document.createElement(type);
      element.className.add(className);
      
      return element;
   }
}

dynamiczne ładowanie img w script.js działa dopiero jak w index.html skasuje "type="module" a w script.js zakomentuje import i kod tworzący klasę divFact.
Dziwny ten JS :P

0

Wszedłem zamiast Ciebie do konsoli w przeglądarce:

DivFactory.js:9 Uncaught ReferenceError: type is not defined
at default.makeElemet (DivFactory.js:9)
at HTMLDocument.<anonymous> (script.js:7)
makeElemet @ DivFactory.js:9
(anonymous) @ script.js:7

Masz błąd w kodzie. Zarówno na chrome jak i na firefox nie będzie to działać. Na przyszłość zaglądaj do konsoli pisząc skrypty JS w przeglądarce bo bez tego będziesz miał ciężko cokolwiek debugować.

1 użytkowników online, w tym zalogowanych: 0, gości: 1